:root {
    /* Nord Polar Night - dark backgrounds */
    --nord0: #2e3440;
    --nord1: #3b4252;
    --nord2: #434c5e;
    --nord3: #4c566a;

    /* Nord Snow Storm - light backgrounds */
    --nord4: #d8dee9;
    --nord5: #e5e9f0;
    --nord6: #f8fafc;

    /* Nord Frost - accent blues/cyans */
    --nord7: #8fbcbb;
    --nord8: #88c0d0;
    --nord9: #81a1c1;
    --nord10: #3b5f8a;

    /* Nord Aurora - accent colors */
    --nord11: #bf616a; /* red */
    --nord12: #d08770; /* orange */
    --nord13: #ebcb8b; /* yellow */
    --nord14: #a3be8c; /* green */
    --nord15: #b48ead; /* purple */

    /* Semantic color mappings */
    --color-bg: #ffffff;
    --color-text: var(--nord3);
    --color-heading: var(--nord0);
    --color-accent: var(--nord10);
    --color-accent-rgb: 59, 95, 138;
    --color-accent-light: #e8f4f8;
    --color-primary: var(--nord10);
    --color-success: var(--nord14);
    --color-warning: var(--nord13);
    --color-warning-hover: #d4a84a;
    --color-warning-rgb: 235, 203, 139;
    --color-danger: var(--nord11);
    --color-danger-rgb: 191, 97, 106;
    --color-border: var(--nord4);

    /* Shadows - Elevation */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Shadows - Focus rings */
    --shadow-focus: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
    --shadow-focus-sm: 0 0 0 2px rgba(var(--color-accent-rgb), 0.2);
    --shadow-focus-danger: 0 0 0 3px rgba(var(--color-danger-rgb), 0.15);

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 20px;
    --radius-full: 50%;

    /* Transitions */
    --duration-fast: 0.15s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;
    --ease-default: ease;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography - Font families */
    --font-body: 'Barlow', sans-serif;
    --font-heading: 'Poppins', sans-serif;

    /* Typography - Line heights */
    --line-height-body: 1.6;

    /* Layout - Section spacing */
    --section-padding-x: 1rem;
    --section-padding-y: 3rem;
    --content-max-width: 1320px;

    /* Section padding formula for full-width sections:
       Centers content at max-width while maintaining minimum horizontal padding.
       Use: padding-inline: var(--section-padding-inline); */
    --section-padding-inline: max(var(--section-padding-x), calc((100vw - var(--content-max-width)) / 2 + var(--section-padding-x)));

    /* Typography - Font sizes */
    --text-2xs: 0.75rem;      /* 12px - labels, overlines */
    --text-xs: 0.8125rem;     /* 13px - small text, captions */
    --text-sm: 0.875rem;      /* 14px - secondary text */
    --text-body: 0.9375rem;   /* 15px - body text */
    --text-base: 1rem;        /* 16px - base text */
    --text-md: 1.0625rem;     /* 17px - emphasized body */
    --text-lg: 1.125rem;      /* 18px - large body, intro */
    --text-xl: 1.25rem;       /* 20px - small heading */
    --text-2xl: 1.5rem;       /* 24px - h5 */
    --text-3xl: 1.75rem;      /* 28px - h4 */
    --text-4xl: 2rem;         /* 32px - h3 */
    --text-5xl: 2.25rem;      /* 36px - h2 */
    --text-6xl: 2.5rem;       /* 40px - h2 large */
    --text-7xl: 2.75rem;      /* 44px - h1 */
    --text-8xl: 3.5rem;       /* 56px - hero */
}