/* ==========================================================================
   WyzFi design tokens · "Lens"
   --------------------------------------------------------------------------
   Single source of truth for the visual language. Everything else in
   /public/css reads from these custom properties; nothing hard-codes a value.

   Porting to the Next.js product:
   - Copy this file as-is into the app's global CSS, or map each group to
     Tailwind theme keys (colors, fontFamily, fontSize, spacing, borderRadius,
     boxShadow, transitionDuration, transitionTimingFunction, zIndex).
   - Keep the two layers: primitives (--umber-*, --paper-*, ...) are raw
     values; semantic tokens (--color-*) are what components use. Themes only
     re-map semantic tokens.
   - Fonts are self-hosted from /public/fonts (OFL, originally Google Fonts).

   Motif: "signal from noise". Contour lines are the only decorative element.
   Noise = taupe, thin, jittery. Signal = paper/apricot, clean, calm.
   ========================================================================== */

/* ---------- Fonts --------------------------------------------------------- */
/* Two files per weight: Latin (always) + Turkish extras (ğ Ğ ı İ ş Ş ₺),
   fetched only when those glyphs are on the page. */
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/funnel-display-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/funnel-display-400-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130-0131, U+015E-015F, U+20BA; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/public/fonts/funnel-display-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/public/fonts/funnel-display-500-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130-0131, U+015E-015F, U+20BA; }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/funnel-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/funnel-sans-400-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130-0131, U+015E-015F, U+20BA; }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/public/fonts/funnel-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/public/fonts/funnel-sans-500-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130-0131, U+015E-015F, U+20BA; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/ibm-plex-mono-400-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130-0131, U+015E-015F, U+20BA; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/public/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/public/fonts/ibm-plex-mono-500-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130-0131, U+015E-015F, U+20BA; }

/* Metric-matched fallbacks: text keeps its size and line breaks while the
   web fonts load, so the swap causes no layout shift (CLS). Values are
   computed from the font files against Arial; Roboto (Android) and
   Liberation Sans (Linux) have near-identical average widths. */
@font-face { font-family: "Funnel Display Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans");
  size-adjust: 108.18%; ascent-override: 92.44%; descent-override: 23.11%; line-gap-override: 0%; }
@font-face { font-family: "Funnel Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans");
  size-adjust: 101.44%; ascent-override: 98.58%; descent-override: 24.65%; line-gap-override: 0%; }

:root {
  color-scheme: dark;

  /* ---------- Colour primitives ------------------------------------------
     Derived from the logo: apricot (#F0B070 range) and muted lavender.
     Contrast ratios in comments are WCAG 2.x against --umber-950. */
  --umber-950: #0F0D0B;   /* page */
  --umber-900: #141210;   /* alternate band */
  --umber-850: #181512;   /* surface (cards, mockups) */
  --umber-800: #201C18;   /* raised surface, hover */
  --umber-700: #2B2621;   /* hairline (1.29:1, decorative only) */
  --umber-600: #3A342D;   /* strong line, contours at rest */
  --taupe-400: #A39A8E;   /* muted text 6.99:1 */
  --taupe-300: #C4BBAE;   /* secondary text 10.2:1 */
  --paper-50:  #F2ECE3;   /* primary text on dark 16.5:1 */
  --paper-100: #F1ECE3;   /* paper band background */
  --paper-200: #E6DFD3;   /* paper surface */
  --paper-300: #D9D1C4;   /* hairline on paper */
  --ink-900:   #1A1714;   /* text on paper 15.2:1, text on apricot 9.8:1 */
  --ink-600:   #645C52;   /* muted text on paper ~5.5:1 */
  --apricot-300: #F9CB98; /* signal hover */
  --apricot-400: #F6B36B; /* signal: CTA, lens, focus (10.7:1 on page) */
  --apricot-500: #E99D50; /* signal pressed */
  --apricot-800: #7A4210; /* signal as text on paper 6.8:1 */
  --lavender-300: #C3BADF;/* secondary series, "coming soon" (10.5:1) */

  /* ---------- Semantic colours (dark theme = default) --------------------- */
  --color-bg: var(--umber-950);
  --color-bg-alt: var(--umber-900);
  --color-surface: var(--umber-850);
  --color-surface-2: var(--umber-800);
  --color-line: var(--umber-700);
  --color-line-strong: var(--umber-600);
  --color-text: var(--paper-50);
  --color-text-2: var(--taupe-300);
  --color-text-muted: var(--taupe-400);
  --color-signal: var(--apricot-400);
  --color-signal-hover: var(--apricot-300);
  --color-signal-press: var(--apricot-500);
  --color-signal-text: var(--apricot-400);
  --color-on-signal: var(--ink-900);
  --color-secondary: var(--lavender-300);
  --color-focus: var(--apricot-400);
  --color-contour-noise: var(--umber-600);
  --color-contour-signal: var(--paper-50);

  /* ---------- Typography --------------------------------------------------- */
  --font-display: "Funnel Display", "Funnel Display Fallback", system-ui, sans-serif;
  --font-body: "Funnel Sans", "Funnel Sans Fallback", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale, 375px to 1920px viewport. Steps are named, not px. */
  --step--2: 0.6875rem;                                        /* 11  mono labels */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);      /* 13-14 captions */
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);         /* 16-17 body */
  --step-1:  clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);     /* 18-21 lead */
  --step-2:  clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem);       /* 21-28 h4, small quote */
  --step-3:  clamp(1.625rem, 1.3rem + 1.4vw, 2.625rem);        /* 26-42 h3 */
  --step-4:  clamp(2rem, 1.45rem + 2.4vw, 3.75rem);            /* 32-60 h2 */
  --step-5:  clamp(2.25rem, 1.5rem + 3.4vw, 5rem);             /* 36-80 statement */
  --step-6:  clamp(2.75rem, 1.4rem + 5.8vw, 8rem);             /* 44-128 hero */

  --leading-display: 0.95;
  --leading-heading: 1.04;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-display: -0.04em;
  --tracking-heading: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-body: 0;
  --tracking-label: 0.14em;   /* mono, uppercase */

  --weight-regular: 400;
  --weight-medium: 500;

  --measure: 62ch;           /* max line length for body copy */

  /* ---------- Space (4px base) ------------------------------------------- */
  --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 */
  --space-section: clamp(5rem, 3rem + 8vw, 11rem);   /* vertical rhythm between sections */
  --space-block: clamp(2.5rem, 1.75rem + 3vw, 5rem); /* heading to content */

  /* ---------- Layout ------------------------------------------------------ */
  --container-max: 90rem;                     /* 1440 */
  --gutter: clamp(1rem, 4vw, 4rem);           /* page side padding: 16 to 64 */
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --header-h: 4.25rem;

  /* ---------- Radii -------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Elevation (kept flat on purpose) ---------------------------- */
  --shadow-hairline: inset 0 0 0 1px var(--color-line);
  --shadow-inner-top: inset 0 1px 0 rgb(242 236 227 / 0.05);
  --shadow-raise: 0 1px 0 rgb(242 236 227 / 0.04) inset, 0 16px 40px -20px rgb(0 0 0 / 0.65);
  --shadow-float: 0 32px 80px -32px rgb(0 0 0 / 0.75);

  /* ---------- Motion ------------------------------------------------------- */
  /* Micro-interactions: 150 to 400 ms, ease-out. Reveals and the pinned story
     use the longer durations. Only transform and opacity are animated.
     GSAP equivalents: --ease-out = "power3.out", --ease-focus = "expo.out". */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-reveal: 900ms;
  --dur-story: 1200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-focus: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --stagger: 60ms;

  /* ---------- Layers ------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-skip: 1000;

  /* ---------- Motif -------------------------------------------------------- */
  --contour-width: 1px;
  --grain-opacity: 0.05;
}

/* Paper theme: the one light "clarity" band. Apply with data-theme="paper". */
[data-theme="paper"] {
  color-scheme: light;
  --color-bg: var(--paper-100);
  --color-bg-alt: var(--paper-200);
  --color-surface: var(--paper-200);
  --color-surface-2: #DDD5C8;
  --color-line: var(--paper-300);
  --color-line-strong: #C7BEAF;
  --color-text: var(--ink-900);
  --color-text-2: #3B352F;
  --color-text-muted: var(--ink-600);
  --color-signal-text: var(--apricot-800);
  --color-focus: var(--ink-900);
  --color-contour-noise: var(--paper-300);
  --color-contour-signal: var(--ink-900);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --dur-story: 0ms;
  }
}