/* ==========================================================================
   Neuronyx AI — design tokens  (shared by neuronyxai.com and lahja.neuronyxai.com)
   Load order:  tokens.css  ->  base.css  ->  page CSS (optional)
   Theme:       follows the system; <html data-theme="light|dark"> forces one.
                Any element can carry data-theme to re-theme a region.
   Arabic:      add the Google Fonts link for IBM Plex Sans Arabic (see partials/head.html).
   ========================================================================== */

/* ---------- Fonts (variable; Latin subset first, full TTF as fallback) ---------- */
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-latin.woff2") format("woff2-variations"),
       url("fonts/sora-latin.woff2") format("woff2"),
       url("fonts/Sora.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2-variations"),
       url("fonts/inter-latin.woff2") format("woff2"),
       url("fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713, U+2715, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Brand palette (raw; prefer the semantic tokens below) ---------- */
  --nx-onyx: #1C1917;
  --nx-paper: #FAF9F7;
  --nx-stone-50: #FDFCFB;
  --nx-stone-100: #F0EEEA;
  --nx-stone-150: #E9E6E1;
  --nx-stone-200: #E2DFD8;
  --nx-stone-300: #D3CEC6;
  --nx-stone-400: #A8A29E;
  --nx-stone-500: #6B645F;
  --nx-stone-600: #57534E;
  --nx-stone-800: #292524;
  --nx-stone-850: #231F1D;
  --nx-stone-900: #171412;
  --nx-clay: #B4532A;          /* UI accent only — never the logo */
  --nx-clay-deep: #9A4523;
  --nx-clay-text: #A84C26;     /* clay for small text on light (>= 4.5:1 on paper + stone-100) */
  --nx-clay-light: #E08A5F;    /* clay for text on dark (>= 5.7:1 on onyx + stone-800) */

  /* ---------- Typography ---------- */
  --font-display: "Sora", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Inter", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  /* fluid scale: 390 px -> 1440 px.  Size + leading + tracking travel together. */
  --fs-display: clamp(2.75rem, 1.85rem + 3.7vw, 5.25rem);
  --lh-display: 1.03;
  --ls-display: -0.038em;

  --fs-h1: clamp(2.25rem, 1.62rem + 2.6vw, 4rem);
  --lh-h1: 1.06;
  --ls-h1: -0.032em;

  --fs-h2: clamp(1.75rem, 1.36rem + 1.6vw, 2.75rem);
  --lh-h2: 1.1;
  --ls-h2: -0.026em;

  --fs-h3: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --lh-h3: 1.25;
  --ls-h3: -0.016em;

  --fs-h4: 1.125rem;
  --lh-h4: 1.35;
  --ls-h4: -0.01em;

  --fs-lead: clamp(1.125rem, 1.04rem + 0.36vw, 1.375rem);
  --lh-lead: 1.5;
  --ls-lead: -0.011em;

  --fs-body: 1.0625rem;        /* 17 px */
  --lh-body: 1.6;
  --ls-body: -0.006em;

  --fs-small: 0.9375rem;       /* 15 px */
  --lh-small: 1.5;
  --ls-small: 0;

  --fs-caption: 0.8125rem;     /* 13 px */
  --lh-caption: 1.4;
  --ls-caption: 0.006em;

  --fs-eyebrow: 0.875rem;
  --ls-eyebrow: 0.005em;

  --fs-code: 0.875rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 680;

  /* ---------- Space (rem, so layout grows with the user's text size) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-7: 2rem;      /* 32 */
  --space-8: 2.5rem;    /* 40 */
  --space-9: 3rem;      /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-11: 5rem;     /* 80 */
  --space-12: 6rem;     /* 96 */
  --space-13: 8rem;     /* 128 */

  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --section-y-tight: clamp(3rem, 2.2rem + 3.4vw, 5.5rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);   /* 16 px at 390, 40 px at 1440 */
  --container: 75rem;          /* 1200 */
  --container-wide: 86rem;     /* 1376 */
  --container-narrow: 46rem;   /* 736  */
  --nav-h: 3.5rem;             /* 56 */

  /* ---------- Radii ---------- */
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2.25rem;
  --radius-pill: 999px;

  /* ---------- Motion ----------
     Springs follow Apple's damping/response model, sampled into linear().
     smooth  = damping 1.0, response 0.40  (default for UI — no overshoot)
     snappy  = damping 1.0, response 0.30  (press / small controls)
     bounce  = damping 0.80, response 0.40 (only after momentum: drag release, flick)
     Use the paired --dur-spring-* durations with them. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring-smooth: cubic-bezier(0.25, 1, 0.3, 1);
  --ease-spring-snappy: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-spring-bounce: cubic-bezier(0.34, 1.32, 0.64, 1);

  --dur-instant: 100ms;
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --dur-reveal: 760ms;
  --dur-spring-smooth: 550ms;
  --dur-spring-snappy: 420ms;
  --dur-spring-bounce: 600ms;

  /* ---------- Layers ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;

  /* logo animation reads these two from :root (see brand/motion/neuronyx-intro.js) */
  --surface: transparent;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring-smooth: linear(0, 0.039, 0.128, 0.237, 0.35, 0.456, 0.552, 0.636, 0.706, 0.765, 0.813, 0.852, 0.884, 0.909, 0.929, 0.945, 0.957, 0.967, 0.975, 0.98, 0.985, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.998, 1);
    --ease-spring-snappy: linear(0, 0.04, 0.131, 0.243, 0.358, 0.466, 0.562, 0.645, 0.715, 0.774, 0.821, 0.859, 0.89, 0.914, 0.934, 0.949, 0.96, 0.97, 0.977, 0.982, 0.986, 0.99, 0.992, 0.994, 0.995, 0.997, 0.997, 0.998, 1);
    --ease-spring-bounce: linear(0, 0.047, 0.158, 0.295, 0.436, 0.568, 0.682, 0.776, 0.851, 0.907, 0.948, 0.976, 0.995, 1.006, 1.012, 1.015, 1.015, 1.014, 1.012, 1.01, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1.001, 1, 1);
  }
}

/* ==========================================================================
   Semantic colour — LIGHT (default)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--nx-paper);                 /* page */
  --bg-alt: var(--nx-stone-100);         /* alternate section band */
  --bg-inset: #F5F3F0;                   /* wells, code, inputs */
  --card: #FFFFFF;                       /* raised surface */
  --card-2: var(--nx-stone-100);         /* quiet surface */
  --fill: rgba(28, 25, 23, 0.05);        /* hover / pressed fills */
  --fill-strong: rgba(28, 25, 23, 0.09);
  --line: var(--nx-stone-200);           /* hairlines */
  --line-strong: var(--nx-stone-300);

  --text: var(--nx-onyx);                /* 16.6:1 on paper */
  --text-2: var(--nx-stone-600);         /*  7.3:1 */
  --text-3: var(--nx-stone-500);         /*  5.4:1 */
  --text-disabled: var(--nx-stone-400);
  --text-on-inverse: var(--nx-paper);

  --inverse: var(--nx-onyx);             /* primary button, inverse bands */
  --inverse-hover: #2E2926;
  --segment-thumb: #FFFFFF;

  --accent: var(--nx-clay);              /* fills, dots, rings */
  --accent-hover: var(--nx-clay-deep);
  --accent-text: var(--nx-clay-text);    /* links / eyebrows */
  --accent-contrast: #FFFFFF;            /* text on --accent (5.0:1) */
  --accent-soft: rgba(180, 83, 42, 0.09);
  --accent-soft-line: rgba(180, 83, 42, 0.26);

  --success: #2F6B47;
  --success-soft: rgba(47, 107, 71, 0.1);
  --warning: #8A5A12;
  --warning-soft: rgba(176, 120, 30, 0.12);
  --danger: #B42318;
  --danger-soft: rgba(180, 35, 24, 0.08);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --material: rgba(250, 249, 247, 0.72);  /* nav / sheets */
  --material-strong: rgba(250, 249, 247, 0.9);
  --material-edge: rgba(255, 255, 255, 0.6);
  --scrim: rgba(28, 25, 23, 0.32);

  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04), 0 2px 8px rgba(28, 25, 23, 0.05);
  --shadow-md: 0 1px 2px rgba(28, 25, 23, 0.04), 0 8px 24px -6px rgba(28, 25, 23, 0.1);
  --shadow-lg: 0 2px 4px rgba(28, 25, 23, 0.04), 0 24px 48px -12px rgba(28, 25, 23, 0.16);
  --shadow-xl: 0 4px 8px rgba(28, 25, 23, 0.04), 0 40px 80px -20px rgba(28, 25, 23, 0.24);

  /* code (docs) */
  --code-bg: #F5F3F0;
  --code-text: #292524;
  --code-line: var(--nx-stone-200);
  --code-comment: #5F5853;   /* 6.3:1 on --code-bg (was 4.2:1) */
  --code-keyword: #9A4523;
  --code-string: #3F6B4A;
  --code-number: #8A4E8F;
  --code-key: #2F5A7A;

  /* logo: one colour; the reversed cut (wider gaps) is used light-on-dark */
  --ink: var(--nx-onyx);
  --logo-std: inline;
  --logo-rev: none;
}

/* ==========================================================================
   Semantic colour — DARK
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--nx-onyx);
  --bg-alt: var(--nx-stone-850);
  --bg-inset: #151210;
  --card: var(--nx-stone-800);
  --card-2: var(--nx-stone-850);
  --fill: rgba(250, 249, 247, 0.06);
  --fill-strong: rgba(250, 249, 247, 0.11);
  --line: #37322E;
  --line-strong: #4A4440;

  --text: var(--nx-paper);               /* 16.6:1 on onyx */
  --text-2: var(--nx-stone-400);         /*  6.9:1 */
  --text-3: #948D87;                     /*  5.4:1 */
  --text-disabled: #625C57;
  --text-on-inverse: var(--nx-onyx);

  --inverse: var(--nx-paper);
  --inverse-hover: #FFFFFF;
  --segment-thumb: #3A3532;

  --accent: var(--nx-clay);
  --accent-hover: #C55F33;
  --accent-text: var(--nx-clay-light);
  --accent-contrast: #FFFFFF;
  --accent-soft: rgba(224, 138, 95, 0.12);
  --accent-soft-line: rgba(224, 138, 95, 0.3);

  --success: #7BC096;
  --success-soft: rgba(123, 192, 150, 0.12);
  --warning: #E0B262;
  --warning-soft: rgba(224, 178, 98, 0.12);
  --danger: #F2877D;
  --danger-soft: rgba(242, 135, 125, 0.12);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--nx-clay-light);

  --material: rgba(28, 25, 23, 0.7);
  --material-strong: rgba(28, 25, 23, 0.9);
  --material-edge: rgba(255, 255, 255, 0.06);
  --scrim: rgba(0, 0, 0, 0.5);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -6px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 48px -12px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.3), 0 40px 80px -20px rgba(0, 0, 0, 0.7);

  --code-bg: #151210;
  --code-text: #E9E6E1;
  --code-line: #2E2A27;
  --code-comment: #8C857F;
  --code-keyword: #E89A72;
  --code-string: #9FCB9F;
  --code-number: #D3A6D6;
  --code-key: #93BFE0;

  --ink: var(--nx-paper);
  --logo-std: none;
  --logo-rev: inline;
}

/* system dark, unless the page forces light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--nx-onyx);
    --bg-alt: var(--nx-stone-850);
    --bg-inset: #151210;
    --card: var(--nx-stone-800);
    --card-2: var(--nx-stone-850);
    --fill: rgba(250, 249, 247, 0.06);
    --fill-strong: rgba(250, 249, 247, 0.11);
    --line: #37322E;
    --line-strong: #4A4440;
    --text: var(--nx-paper);
    --text-2: var(--nx-stone-400);
    --text-3: #948D87;
    --text-disabled: #625C57;
    --text-on-inverse: var(--nx-onyx);
    --inverse: var(--nx-paper);
    --inverse-hover: #FFFFFF;
  --segment-thumb: #3A3532;
    --accent: var(--nx-clay);
    --accent-hover: #C55F33;
    --accent-text: var(--nx-clay-light);
    --accent-contrast: #FFFFFF;
    --accent-soft: rgba(224, 138, 95, 0.12);
    --accent-soft-line: rgba(224, 138, 95, 0.3);
    --success: #7BC096;
    --success-soft: rgba(123, 192, 150, 0.12);
    --warning: #E0B262;
    --warning-soft: rgba(224, 178, 98, 0.12);
    --danger: #F2877D;
    --danger-soft: rgba(242, 135, 125, 0.12);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--nx-clay-light);
    --material: rgba(28, 25, 23, 0.7);
    --material-strong: rgba(28, 25, 23, 0.9);
    --material-edge: rgba(255, 255, 255, 0.06);
    --scrim: rgba(0, 0, 0, 0.5);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -6px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 48px -12px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.3), 0 40px 80px -20px rgba(0, 0, 0, 0.7);
    --code-bg: #151210;
    --code-text: #E9E6E1;
    --code-line: #2E2A27;
    --code-comment: #8C857F;
    --code-keyword: #E89A72;
    --code-string: #9FCB9F;
    --code-number: #D3A6D6;
    --code-key: #93BFE0;
    --ink: var(--nx-paper);
    --logo-std: none;
    --logo-rev: inline;
  }
}

/* Inverse bands (.section--inverse, .card--inverse) — set on the ROOT only, so a
   region marked data-theme="dark" inherits the page value instead of resetting it. */
:root { --band-inverse: var(--nx-onyx); }
:root[data-theme="dark"] { --band-inverse: #0F0D0C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --band-inverse: #0F0D0C; }
}

/* Accessibility preferences */
@media (prefers-contrast: more) {
  :root:not(#\#), [data-theme]:not(#\#) {
    --line: var(--text-3);
    --line-strong: var(--text-2);
    --text-2: var(--text);
    --material: var(--bg);
    --material-strong: var(--bg);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root:not(#\#), [data-theme]:not(#\#) {
    --material: var(--bg);
    --material-strong: var(--bg);
  }
}