/* ==================================================================================================================
   RESET
   ================================================================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans), sans-serif;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--color-white);
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}


:root {
    /* ============================================================================================================
       BRAND COLOR SCALES
       ============================================================================================================ */

    /* Cultured - Warmest light neutral (#F9F8F5) anchored at 50 */
    --color-cultured-50: oklch(0.9791 0.0041 91.45); /* BASE */
    --color-cultured-100: oklch(0.8977 0.0196 90.55); /* -12.5% */
    --color-cultured-200: oklch(0.8145 0.0368 91.16); /* -25% */
    --color-cultured-300: oklch(0.73 0.045 91); /* Interpolated */
    --color-cultured-400: oklch(0.65 0.050 91); /* Interpolated */
    --color-cultured-500: oklch(0.57 0.048 91); /* Interpolated */
    --color-cultured-600: oklch(0.49 0.042 91); /* Interpolated */
    --color-cultured-700: oklch(0.41 0.036 91); /* Interpolated */
    --color-cultured-800: oklch(0.33 0.030 91); /* Interpolated */
    --color-cultured-900: oklch(0.26 0.024 91); /* Interpolated */
    --color-cultured-950: oklch(0.20 0.018 91); /* Interpolated */

    /* Pale Silver - Warm neutral (#CFCAC3) anchored at 300 */
    --color-pale-silver-50: oklch(0.96 0.004 80); /* Interpolated */
    --color-pale-silver-100: oklch(0.9018 0.0063 75.4); /* +37.5% */
    --color-pale-silver-200: oklch(0.8829 0.0088 84.57); /* +25% */
    --color-pale-silver-300: oklch(0.841 0.0111 76.59); /* BASE */
    --color-pale-silver-400: oklch(0.7665 0.0161 77.04); /* -12.5% */
    --color-pale-silver-500: oklch(0.6878 0.022 74.57); /* -25% */
    --color-pale-silver-600: oklch(0.61 0.024 74); /* Interpolated */
    --color-pale-silver-700: oklch(0.54 0.022 74); /* Interpolated */
    --color-pale-silver-800: oklch(0.47 0.020 74); /* Interpolated */
    --color-pale-silver-900: oklch(0.40 0.018 74); /* Interpolated */
    --color-pale-silver-950: oklch(0.32 0.015 74); /* Interpolated */

    /* Silver Sand - Cool neutral (#BBC5C7) anchored at 300 */
    --color-silver-sand-50: oklch(0.95 0.006 216); /* Interpolated */
    --color-silver-sand-100: oklch(0.8874 0.0071 219.57); /* +37.5% */
    --color-silver-sand-200: oklch(0.8651 0.0081 216.63); /* +25% */
    --color-silver-sand-300: oklch(0.8163 0.0114 211.04); /* BASE */
    --color-silver-sand-400: oklch(0.744 0.0163 212.01); /* -12.5% */
    --color-silver-sand-500: oklch(0.669 0.0221 208.13); /* -25% */
    --color-silver-sand-600: oklch(0.59 0.024 208); /* Interpolated */
    --color-silver-sand-700: oklch(0.52 0.022 208); /* Interpolated */
    --color-silver-sand-800: oklch(0.45 0.020 208); /* Interpolated */
    --color-silver-sand-900: oklch(0.38 0.018 208); /* Interpolated */
    --color-silver-sand-950: oklch(0.30 0.015 208); /* Interpolated */

    /* Green - Brand accent (Morning Blue #809688) anchored at 500 */
    --color-green-50: oklch(0.95 0.010 157); /* Interpolated */
    --color-green-100: oklch(0.88 0.013 158); /* Interpolated */
    --color-green-200: oklch(0.7891 0.0182 159); /* +37.5% */
    --color-green-300: oklch(0.745 0.0228 158.4); /* +25% */
    --color-green-400: oklch(0.701 0.0266 156.47); /* +12.5% */
    --color-green-500: oklch(0.6517 0.0324 157.47); /* BASE */
    --color-green-600: oklch(0.5983 0.033 157.34); /* -12.5% */
    --color-green-700: oklch(0.5362 0.0293 157.55); /* -25% */
    --color-green-800: oklch(0.48 0.026 157); /* Interpolated */
    --color-green-900: oklch(0.42 0.022 157); /* Interpolated */
    --color-green-950: oklch(0.34 0.018 157); /* Interpolated */

    /* Charcoal - Brand dark (#343C51) anchored at 800 */
    --color-charcoal-50: oklch(0.92 0.020 267); /* Interpolated */
    --color-charcoal-100: oklch(0.85 0.030 267); /* Interpolated */
    --color-charcoal-200: oklch(0.75 0.045 267); /* Interpolated */
    --color-charcoal-300: oklch(0.67 0.055 267); /* Interpolated */
    --color-charcoal-400: oklch(0.595 0.0595 267.44); /* +37.5% */
    --color-charcoal-500: oklch(0.5162 0.0583 267.49); /* +25% */
    --color-charcoal-600: oklch(0.4376 0.0501 268.25); /* +12.5% */
    --color-charcoal-700: oklch(0.398 0.044 268.27); /* Interpolated */
    --color-charcoal-800: oklch(0.358 0.0382 268.29); /* BASE */
    --color-charcoal-900: oklch(0.327 0.0352 268.75); /* -12.5% */
    --color-charcoal-950: oklch(0.2986 0.0304 268.57); /* -25% */

    /* Onyx - True neutral (#414042) anchored at 800 */
    --color-onyx-50: oklch(0.95 0.002 308); /* Interpolated */
    --color-onyx-100: oklch(0.88 0.003 308); /* Interpolated */
    --color-onyx-200: oklch(0.80 0.004 308); /* Interpolated */
    --color-onyx-300: oklch(0.72 0.005 308); /* Interpolated */
    --color-onyx-400: oklch(0.64 0.006 306); /* Interpolated */
    --color-onyx-500: oklch(0.5391 0.0085 312.24); /* +25% */
    --color-onyx-600: oklch(0.4561 0.0054 314.77); /* +12.5% */
    --color-onyx-700: oklch(0.415 0.0045 311); /* Interpolated */
    --color-onyx-800: oklch(0.3732 0.0036 308.35); /* BASE */
    --color-onyx-900: oklch(0.3385 0.0037 308.34); /* -12.5% */
    --color-onyx-950: oklch(0.307 0.0038 308.32); /* -25% */


    /* ==============================================================================================================
       FUNCTIONAL COLORS - For UI states
       ============================================================================================================== */

    /* Red - Error states */
    --color-red-50: oklch(0.971 0.013 17.38);
    --color-red-100: oklch(0.936 0.032 17.717);
    --color-red-200: oklch(0.885 0.062 18.334);
    --color-red-300: oklch(0.808 0.114 19.571);
    --color-red-400: oklch(0.704 0.191 22.216);
    --color-red-500: oklch(0.637 0.237 25.331);
    --color-red-600: oklch(0.577 0.245 27.325);
    --color-red-700: oklch(0.505 0.213 27.518);
    --color-red-800: oklch(0.444 0.177 26.899);
    --color-red-900: oklch(0.396 0.141 25.723);
    --color-red-950: oklch(0.258 0.092 26.042);

    /* Amber - Warning states */
    --color-amber-50: oklch(0.987 0.022 95.277);
    --color-amber-100: oklch(0.962 0.059 95.617);
    --color-amber-200: oklch(0.924 0.12 95.746);
    --color-amber-300: oklch(0.879 0.169 91.605);
    --color-amber-400: oklch(0.828 0.189 84.429);
    --color-amber-500: oklch(0.769 0.188 70.08);
    --color-amber-600: oklch(0.666 0.179 58.318);
    --color-amber-700: oklch(0.555 0.163 48.998);
    --color-amber-800: oklch(0.473 0.137 46.201);
    --color-amber-900: oklch(0.414 0.112 45.904);
    --color-amber-950: oklch(0.279 0.077 45.635);

    /* Emerald - Success states */
    --color-emerald-50: oklch(0.979 0.021 166.113);
    --color-emerald-100: oklch(0.95 0.052 163.051);
    --color-emerald-200: oklch(0.905 0.093 164.15);
    --color-emerald-300: oklch(0.845 0.143 164.978);
    --color-emerald-400: oklch(0.765 0.177 163.223);
    --color-emerald-500: oklch(0.696 0.17 162.48);
    --color-emerald-600: oklch(0.596 0.145 163.225);
    --color-emerald-700: oklch(0.508 0.118 165.612);
    --color-emerald-800: oklch(0.432 0.095 166.913);
    --color-emerald-900: oklch(0.378 0.077 168.94);
    --color-emerald-950: oklch(0.262 0.051 172.552);

    /* Sky - Info/link states */
    --color-sky-50: oklch(0.977 0.013 236.62);
    --color-sky-100: oklch(0.951 0.026 236.824);
    --color-sky-200: oklch(0.901 0.058 230.902);
    --color-sky-300: oklch(0.828 0.111 230.318);
    --color-sky-400: oklch(0.746 0.16 232.661);
    --color-sky-500: oklch(0.685 0.169 237.323);
    --color-sky-600: oklch(0.588 0.158 241.966);
    --color-sky-700: oklch(0.5 0.134 242.749);
    --color-sky-800: oklch(0.443 0.11 240.79);
    --color-sky-900: oklch(0.391 0.09 240.876);
    --color-sky-950: oklch(0.293 0.066 243.157);

    /* Pure values */
    --color-black: #000;
    --color-white: #fff;


    /* ==============================================================================================================
       SEMANTIC TOKENS
       ============================================================================================================== */

    /* Surfaces: Cultured for warmest backgrounds */
    --surface-base: var(--color-cultured-50);
    --surface-overlay: var(--color-white);
    --surface-subtle: var(--color-cultured-100);
    --surface-muted: var(--color-pale-silver-100);

    /* Text: Onyx for primary text (most neutral) */
    --text-primary: var(--color-onyx-800);                /* Brand black for body text */
    --text-secondary: var(--color-onyx-600);              /* Lighter brand gray */
    --text-tertiary: var(--color-onyx-500);               /* Even lighter */
    --text-muted: var(--color-silver-sand-500);           /* Cool gray for de-emphasized */
    --text-brand: var(--color-charcoal-600);              /* Brand blue-black for headlines */
    --text-brand-emphasis: var(--color-charcoal-800);     /* Darker brand text */

    /* Links */
    --link-default: var(--color-sky-600);
    --link-hover: var(--color-sky-500);
    --link-visited: var(--color-sky-800);

    /* Borders: Pale Silver for warm borders, Silver Sand for cool */
    --border-subtle: var(--color-pale-silver-200);
    --border-default: var(--color-pale-silver-300);
    --border-emphasis: var(--color-silver-sand-400);

    /* Interactive: Charcoal is the primary brand action color */
    --interactive-primary: var(--color-charcoal-500);
    --interactive-primary-hover: var(--color-charcoal-400);
    --interactive-brightness: brightness(1.05);

    /* States */
    --state-success: var(--color-emerald-600);
    --state-success-bg: var(--color-emerald-50);
    --state-success-border: var(--color-emerald-300);
    --state-success-text: var(--color-emerald-800);

    --state-error: var(--color-red-600);
    --state-error-bg: var(--color-red-50);
    --state-error-border: var(--color-red-300);
    --state-error-text: var(--color-red-800);

    --state-warning: var(--color-amber-600);
    --state-warning-bg: var(--color-amber-50);
    --state-warning-border: var(--color-amber-300);
    --state-warning-text: var(--color-amber-900);

    --state-info: var(--color-sky-600);
    --state-info-bg: var(--color-sky-50);
    --state-info-border: var(--color-sky-300);
    --state-info-text: var(--color-sky-800);

    /* Focus states */
    --focus-ring: var(--color-green-500);


    /* ==============================================================================================================
       SHADOWS - Using truly neutral grays
       ============================================================================================================== */

    --shadow-color-lightness: 0.216;
    --shadow-color-chroma: 0.009;
    --shadow-color-hue: 56.043;

    --shadow-xs: 0 1px 2px 0 oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.05);
    --shadow-sm: 0 1px 3px 0 oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.1), 0 1px 2px -1px oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.1);
    --shadow-md: 0 4px 6px -1px oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.1), 0 2px 4px -2px oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.1);
    --shadow-lg: 0 10px 15px -3px oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.1), 0 4px 6px -4px oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.1);
    --shadow-xl: 0 20px 25px -5px oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.1), 0 8px 10px -6px oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.1);
    --shadow-2xl: 0 25px 50px -12px oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.25);
    --shadow-inner: inset 0 2px 4px 0 oklch(var(--shadow-color-lightness) var(--shadow-color-chroma) var(--shadow-color-hue) / 0.05);


    /* ==============================================================================================================
       BREAKPOINTS (For JS access and container queries)
       ============================================================================================================== */
    --breakpoint-xs: 400px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* Container max-widths */
    --container-xs: 400px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;


    /* ==============================================================================================================
       SPACING SCALE
       ============================================================================================================== */
    --spacing-0: 0;
    --spacing-px: 1px;
    --spacing-0_5: 0.125rem; /* 2px */
    --spacing-1: 0.25rem; /* 4px */
    --spacing-1_5: 0.375rem; /* 6px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-2_5: 0.625rem; /* 10px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-3_5: 0.875rem; /* 14px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-7: 1.75rem; /* 28px */
    --spacing-8: 2rem; /* 32px */
    --spacing-9: 2.25rem; /* 36px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-11: 2.75rem; /* 44px */
    --spacing-12: 3rem; /* 48px */
    --spacing-14: 3.5rem; /* 56px */
    --spacing-16: 4rem; /* 64px */
    --spacing-18: 4.5rem; /* 72px */
    --spacing-20: 5rem; /* 80px */
    --spacing-24: 6rem; /* 96px */
    --spacing-28: 7rem; /* 112px */
    --spacing-32: 8rem; /* 128px */
    --spacing-36: 9rem;
    --spacing-40: 10rem;
    --spacing-44: 11rem;
    --spacing-48: 12rem;
    --spacing-52: 13rem;
    --spacing-56: 14rem;
    --spacing-60: 15rem;
    --spacing-64: 16rem;
    --spacing-72: 18rem;
    --spacing-80: 20rem;
    --spacing-96: 24rem;


    /* ==============================================================================================================
       BORDER RADIUS
       ============================================================================================================== */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;


    /* ==============================================================================================================
       ICON SIZES
       ============================================================================================================== */
    --icon-xs: var(--spacing-4);  /* 16px */
    --icon-sm: var(--spacing-5);  /* 20px */
    --icon-md: var(--spacing-6);  /* 24px */
    --icon-lg: var(--spacing-8);  /* 32px */
    --icon-xl: var(--spacing-10); /* 40px */


    /* ==============================================================================================================
       TYPOGRAPHY
       ============================================================================================================== */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
    --text-6xl: 3.75rem; /* 60px */
    --text-7xl: 4.5rem; /* 72px */

    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;


    /* ==============================================================================================================
       TRANSITIONS
       ============================================================================================================== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);


    /* ==============================================================================================================
       Z-INDEX SCALE
       ============================================================================================================== */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-floating: 1250;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-tooltip: 1600;
    --z-toast: 1700;


    /* ==============================================================================================================
       COMPONENT TOKENS
       ============================================================================================================== */

    /* Buttons */
    --button-padding-x-sm: var(--spacing-3);
    --button-padding-y-sm: var(--spacing-1_5);
    --button-padding-x-md: var(--spacing-4);
    --button-padding-y-md: var(--spacing-2);
    --button-padding-x-lg: var(--spacing-6);
    --button-padding-y-lg: var(--spacing-3);

    --button-primary-bg: var(--interactive-primary);
    --button-primary-text: var(--color-white);

    --button-secondary-bg: var(--color-green-500);
    --button-secondary-text: var(--color-white);
    --button-secondary-border: var(--border-default);

    --button-danger-bg: var(--state-error);
    --button-danger-text: var(--color-white);
    --button-danger-hover: var(--color-red-700);

    --button-focus-ring: var(--focus-ring);
    --button-focus-ring-offset: 2px;
    --button-focus-ring-width: 3px;

    /* Navigation */
    --nav-bg: var(--color-cultured-50);
    --nav-border: var(--border-subtle);
    --nav-shadow: var(--shadow-2xl);
    --nav-padding-x: var(--spacing-6);
    --nav-padding-y: var(--spacing-2);
    --nav-radius: var(--radius-full);

    /* Cards */
    --card-bg: var(--color-cultured-50);
    --card-border: var(--border-subtle);
    --card-padding: var(--spacing-6);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-md);

    /* Inputs */
    --input-bg: var(--surface-overlay);
    --input-border: var(--border-default);
    --input-border-focus: var(--focus-ring);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-tertiary);
    --input-padding-x: var(--spacing-3);
    --input-padding-y: var(--spacing-2);
    --input-radius: var(--radius-md);
    --input-error-border: var(--state-error);
    --input-error-text: var(--state-error-text);
    --input-success-border: var(--state-success);

    /* Reviews */
    --review-star-color: var(--color-amber-400);
}