/* =============================================================================
   NEXUS — Design Tokens
   Single source of truth for colour, type, space, motion and elevation.
   Dark is the base architecture; light is an explicit override layer.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /* ---------------------------------------------------------------------
       Primitives — neutrals
       Cool, low-chroma grey ramp. Never referenced directly by components.
       ------------------------------------------------------------------ */
    --nx-gray-1000: oklch(14.5% 0.008 264);
    --nx-gray-950: oklch(18% 0.009 264);
    --nx-gray-900: oklch(22% 0.01 264);
    --nx-gray-850: oklch(26% 0.011 264);
    --nx-gray-800: oklch(30% 0.012 264);
    --nx-gray-700: oklch(38% 0.012 264);
    --nx-gray-600: oklch(47% 0.013 264);
    --nx-gray-500: oklch(56% 0.013 264);
    --nx-gray-400: oklch(66% 0.012 264);
    --nx-gray-300: oklch(76% 0.01 264);
    --nx-gray-200: oklch(85% 0.008 264);
    --nx-gray-100: oklch(92% 0.006 264);
    --nx-gray-50: oklch(96.5% 0.004 264);
    --nx-white: oklch(99.5% 0 0);

    /* ---------------------------------------------------------------------
       Primitives — accent
       The single signal colour. Used sparingly: one action per view.
       ------------------------------------------------------------------ */
    --nx-accent-200: oklch(91% 0.05 262);
    --nx-accent-300: oklch(85% 0.09 262);
    --nx-accent-400: oklch(78% 0.13 262);
    --nx-accent-500: oklch(70% 0.17 262);
    --nx-accent-600: oklch(62% 0.19 262);
    --nx-accent-700: oklch(52% 0.17 262);
    --nx-accent-800: oklch(40% 0.13 262);
    --nx-accent-900: oklch(28% 0.09 262);

    /* ---------------------------------------------------------------------
       Primitives — status
       ------------------------------------------------------------------ */
    --nx-positive-400: oklch(78% 0.15 158);
    --nx-positive-700: oklch(52% 0.13 158);
    --nx-critical-400: oklch(72% 0.17 24);
    --nx-critical-700: oklch(52% 0.19 24);

    /* ---------------------------------------------------------------------
       Semantic colour — dark (base)
       ------------------------------------------------------------------ */
    color-scheme: dark;

    --color-canvas: var(--nx-gray-1000);
    --color-surface: var(--nx-gray-950);
    --color-surface-raised: var(--nx-gray-900);
    --color-surface-sunken: oklch(11.5% 0.006 264);
    --color-surface-inverse: var(--nx-gray-50);

    --color-text: var(--nx-gray-50);
    --color-text-muted: var(--nx-gray-300);
    --color-text-subtle: var(--nx-gray-400);
    --color-text-inverse: var(--nx-gray-1000);

    --color-border: oklch(100% 0 0 / 9%);
    --color-border-strong: oklch(100% 0 0 / 16%);
    --color-border-inverse: oklch(0% 0 0 / 12%);

    --color-accent: var(--nx-accent-400);
    --color-accent-hover: var(--nx-accent-300);
    --color-accent-solid: var(--nx-accent-500);
    --color-accent-solid-hover: var(--nx-accent-400);
    --color-on-accent: var(--nx-gray-1000);
    --color-accent-wash: oklch(70% 0.17 262 / 12%);

    --color-positive: var(--nx-positive-400);
    --color-critical: var(--nx-critical-400);

    --color-focus: var(--nx-accent-300);
    --color-selection: oklch(70% 0.17 262 / 28%);
    --color-scrim: oklch(14.5% 0.008 264 / 72%);

    /* Halo used behind the hero and section transitions. */
    --gradient-halo: radial-gradient(
      60% 60% at 50% 0%,
      oklch(70% 0.17 262 / 18%) 0%,
      oklch(70% 0.17 262 / 0%) 100%
    );
    --gradient-rule: linear-gradient(
      90deg,
      transparent 0%,
      var(--color-border-strong) 18%,
      var(--color-border-strong) 82%,
      transparent 100%
    );

    /* ---------------------------------------------------------------------
       Typography
       ------------------------------------------------------------------ */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo",
      "Consolas", monospace;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Fluid unit: 0rem at 360px viewport → 1rem at 1440px. All fluid values
       are expressed as `base + n × --fluid`, so the scale stays proportional
       and no clamp() is ever repeated. */
    --fluid: clamp(0rem, (100vw - 22.5rem) / 67.5, 1rem);

    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: calc(1rem + 0.125 * var(--fluid));
    --text-lg: calc(1.125rem + 0.125 * var(--fluid));
    --text-xl: calc(1.25rem + 0.25 * var(--fluid));
    --text-2xl: calc(1.5rem + 0.375 * var(--fluid));
    --text-3xl: calc(1.75rem + 0.625 * var(--fluid));
    --text-4xl: calc(2rem + 1 * var(--fluid));
    --text-5xl: calc(2.5rem + 1.5 * var(--fluid));
    --text-6xl: calc(3rem + 2.25 * var(--fluid));

    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-tighter: -0.03em;
    --tracking-tight: -0.02em;
    --tracking-normal: -0.011em;
    --tracking-wide: 0.02em;
    --tracking-widest: 0.14em;

    /* ---------------------------------------------------------------------
       Space — 4px base grid
       ------------------------------------------------------------------ */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;

    --space-section: calc(4rem + 4 * var(--fluid));
    --space-section-lg: calc(5.5rem + 6.5 * var(--fluid));

    /* ---------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------ */
    --width-wide: 84rem;
    --width-content: 68rem;
    --width-narrow: 46rem;
    --width-prose: 38rem;
    --gutter: calc(1.25rem + 1.25 * var(--fluid));
    --header-height: calc(3.75rem + 0.75 * var(--fluid));

    /* ---------------------------------------------------------------------
       Radius
       ------------------------------------------------------------------ */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.75rem;
    --radius-full: 62.4375rem;

    /* ---------------------------------------------------------------------
       Elevation
       On dark surfaces depth reads through borders and light, not drop
       shadow alone — each level pairs a hairline ring with a soft shadow.
       ------------------------------------------------------------------ */
    --shadow-ring: inset 0 0 0 1px var(--color-border);
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 40%);
    --shadow-md: 0 4px 12px -2px oklch(0% 0 0 / 45%),
      0 2px 4px -2px oklch(0% 0 0 / 35%);
    --shadow-lg: 0 16px 40px -12px oklch(0% 0 0 / 60%),
      0 4px 10px -4px oklch(0% 0 0 / 40%);
    --shadow-xl: 0 32px 72px -20px oklch(0% 0 0 / 70%),
      0 8px 20px -8px oklch(0% 0 0 / 45%);
    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus);

    /* ---------------------------------------------------------------------
       Motion
       ------------------------------------------------------------------ */
    --duration-instant: 80ms;
    --duration-fast: 160ms;
    --duration-base: 240ms;
    --duration-slow: 400ms;
    --duration-slower: 640ms;

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    /* Reveal choreography — shared by every scroll-triggered element. */
    --reveal-distance: 1rem;
    --reveal-duration: var(--duration-slow);
    --reveal-stagger: 70ms;

    /* ---------------------------------------------------------------------
       Depth order
       ------------------------------------------------------------------ */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-notify: 500;
  }

  /* -----------------------------------------------------------------------
     Semantic colour — light override
     `data-theme` is always resolved on <html> before first paint, so this
     block is the only place light values exist.
     -------------------------------------------------------------------- */
  :root[data-theme="light"] {
    color-scheme: light;

    --color-canvas: var(--nx-white);
    --color-surface: var(--nx-gray-50);
    --color-surface-raised: var(--nx-white);
    --color-surface-sunken: var(--nx-gray-100);
    --color-surface-inverse: var(--nx-gray-1000);

    --color-text: var(--nx-gray-1000);
    --color-text-muted: var(--nx-gray-700);
    --color-text-subtle: var(--nx-gray-600);
    --color-text-inverse: var(--nx-gray-50);

    --color-border: oklch(0% 0 0 / 10%);
    --color-border-strong: oklch(0% 0 0 / 18%);
    --color-border-inverse: oklch(100% 0 0 / 14%);

    --color-accent: var(--nx-accent-700);
    --color-accent-hover: var(--nx-accent-800);
    --color-accent-solid: var(--nx-accent-700);
    --color-accent-solid-hover: var(--nx-accent-800);
    --color-on-accent: var(--nx-white);
    --color-accent-wash: oklch(52% 0.17 262 / 8%);

    --color-positive: var(--nx-positive-700);
    --color-critical: var(--nx-critical-700);

    --color-focus: var(--nx-accent-700);
    --color-selection: oklch(70% 0.17 262 / 24%);
    --color-scrim: oklch(20% 0.01 264 / 45%);

    --gradient-halo: radial-gradient(
      60% 60% at 50% 0%,
      oklch(52% 0.17 262 / 10%) 0%,
      oklch(52% 0.17 262 / 0%) 100%
    );

    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 8%);
    --shadow-md: 0 4px 12px -2px oklch(0% 0 0 / 10%),
      0 2px 4px -2px oklch(0% 0 0 / 6%);
    --shadow-lg: 0 16px 40px -12px oklch(0% 0 0 / 14%),
      0 4px 10px -4px oklch(0% 0 0 / 8%);
    --shadow-xl: 0 32px 72px -20px oklch(0% 0 0 / 18%),
      0 8px 20px -8px oklch(0% 0 0 / 10%);
  }
}