/* ==========================================================================
   Cozy Cotton 2026 — Design tokens
   Layer order is declared here once; every other stylesheet wraps itself
   in one of these layers, so specificity never fights across files.
   ========================================================================== */
@layer tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    /* ---------------------------------------------------------------------
       Brand (extracted in Phase 0 from cozycotton.gr — do not invent new hues)
       --------------------------------------------------------------------- */
    --brand-coral: #ff7778;        /* XStore --et_active-color, checkout & cookie buttons */
    --brand-coral-logo: #e45c68;   /* logo wordmark + tagline */
    --brand-stone: #a7aaad;        /* logo diamond mark */

    /* Coral scale — tints mixed in OKLCH toward the linen background */
    --coral-50:  color-mix(in oklch, var(--brand-coral) 7%,  var(--linen));
    --coral-100: color-mix(in oklch, var(--brand-coral) 14%, var(--linen));
    --coral-200: color-mix(in oklch, var(--brand-coral) 30%, var(--linen));
    --coral-300: color-mix(in oklch, var(--brand-coral) 58%, var(--linen));
    --coral-500: var(--brand-coral);           /* decoration, fills with ink text (5.9:1) */
    --coral-600: var(--brand-coral-logo);      /* large text, focus ring (3.3:1 on linen) */
    --coral-700: #b83a47;                      /* text links, sale, white-on buttons (5.3:1 / 5.6:1) */
    --coral-800: color-mix(in oklch, var(--coral-700) 72%, var(--ink));

    /* ---------------------------------------------------------------------
       Warm neutrals (replace the old cool #f6f6f6 / #e2e2e2 / #222 greys)
       --------------------------------------------------------------------- */
    --paper: #fffdf9;       /* cards, inputs, drawers */
    --linen: #faf7f2;       /* page background */
    --sand: #f3ede4;        /* soft surfaces */
    --oat: #e9e1d5;         /* deeper surfaces, image placeholders */
    --clay: #d8cdbd;        /* rating track, dividers on sand */
    --line: #e5ded3;        /* 1px hairlines */
    --line-strong: #cfc5b7; /* input borders */
    --stone: var(--brand-stone);
    --muted: #6b625d;       /* secondary text — 5.6:1 on linen */
    --ink-soft: #4a4340;
    --ink: #2b2624;         /* primary text — 14:1 on linen */
    --night: #262120;       /* footer / dark sections */
    --night-soft: #352f2c;

    /* Functional (kept desaturated so coral stays the only saturated hue) */
    --success: #3f6b47;
    --warning: #8a5a12;

    /* ---------------------------------------------------------------------
       Semantic aliases — components use these, never raw palette values
       --------------------------------------------------------------------- */
    --bg: var(--linen);
    --surface: var(--paper);
    --surface-2: var(--sand);
    --surface-3: var(--oat);
    --text: var(--ink);
    --text-soft: var(--ink-soft);
    --text-muted: var(--muted);
    --heading: var(--ink);
    --border: var(--line);
    --border-strong: var(--line-strong);
    --link: var(--ink);
    --link-hover: var(--coral-700);
    --accent: var(--coral-500);
    --accent-ink: var(--coral-700);
    --accent-soft: var(--coral-100);
    --focus: var(--coral-600);
    --sale: var(--coral-700);
    --on-dark: #f5efe6;
    --on-dark-muted: color-mix(in oklch, var(--on-dark) 72%, var(--night));
    --on-dark-line: color-mix(in oklch, var(--on-dark) 14%, var(--night));
    --scrim: rgb(38 33 32 / 0.42);

    /* ---------------------------------------------------------------------
       Typography — both families ship greek + greek-ext subsets
       --------------------------------------------------------------------- */
    --font-serif: "Literata", Georgia, "Times New Roman", serif;
    --font-sans: "Commissioner", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* Fluid scale (360px → 1440px) */
    --fs-2xs: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);
    --fs-xs:  clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
    --fs-sm:  clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
    --fs-md:  clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem);
    --fs-lg:  clamp(1.3125rem, 1.22rem + 0.42vw, 1.625rem);
    --fs-xl:  clamp(1.625rem, 1.44rem + 0.85vw, 2.25rem);
    --fs-2xl: clamp(2rem, 1.67rem + 1.5vw, 3.125rem);
    --fs-3xl: clamp(2.375rem, 1.82rem + 2.5vw, 4.25rem);
    --fs-4xl: clamp(2.75rem, 1.9rem + 3.8vw, 5.5rem);

    --lh-tight: 1.08;
    --lh-snug: 1.25;
    --lh-body: 1.6;
    --tracking-display: -0.018em;
    --tracking-label: 0.14em;   /* Latin/numeric micro labels only — never Greek caps */

    /* ---------------------------------------------------------------------
       Space — 8px rhythm (4px half-step for tight UI)
       --------------------------------------------------------------------- */
    --space-1: 0.25rem;  /* 4  */
    --space-2: 0.5rem;   /* 8  */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.5rem;   /* 24 */
    --space-6: 2rem;     /* 32 */
    --space-7: 3rem;     /* 48 */
    --space-8: 4rem;     /* 64 */
    --space-9: 6rem;     /* 96 */
    --space-10: 8rem;    /* 128 */

    --gutter: clamp(1rem, 0.55rem + 2vw, 2.5rem);
    --section-space: clamp(3.5rem, 2.4rem + 4.8vw, 7.5rem);
    --section-space-sm: clamp(2.5rem, 2rem + 2.4vw, 4.5rem);

    /* Layout */
    --container-max: 1360px;
    --measure: 65ch;
    --header-h: 76px;
    --header-h-compact: 60px;
    --nav-h: 48px;

    /* Shape */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Elevation — only hover + overlays get a shadow */
    --shadow-hover: 0 10px 30px -18px rgb(43 38 36 / 0.35);
    --shadow-overlay: 0 24px 60px -28px rgb(43 38 36 / 0.45);
    --shadow-drawer: 0 0 60px -10px rgb(43 38 36 / 0.3);

    /* Motion — restrained */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    --dur-fast: 160ms;
    --dur: 240ms;
    --dur-slow: 300ms;

    /* Stacking */
    --z-sticky: 40;
    --z-header: 50;
    --z-mega: 55;
    --z-fab: 70;
    --z-cookie: 80;
    --z-toast: 200;

    /* Texture — linen weave + grain, used at < 5% opacity */
    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .15 0 0 0 0 .14 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --texture-weave:
      repeating-linear-gradient(0deg, rgb(43 38 36 / 0.5) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgb(43 38 36 / 0.35) 0 1px, transparent 1px 4px);

    /* Icons used from CSS (masks) */
    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E");
    --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.75 5.8 6.25.8-4.6 4.35 1.15 6.25L12 16.95 6.45 20l1.15-6.25L3 9.4l6.25-.8z'/%3E%3C/svg%3E");
  }
}