/* ============================================================================
   NAUTRIS DESIGN TOKENS  —  canonical source of truth
   ----------------------------------------------------------------------------
   One token layer shared by every surface: landing (web), console, issuer,
   docs, and (mirrored, system-font) the air-gapped engine /ui.

   Three layers, in order:
     1. PRIMITIVES  raw palette + the fixed scales (space/type/radius/etc.)
     2. SEMANTIC    role tokens (surface / text / border / brand / status),
                    themed for dark (default) and light ([data-theme="light"]).
     3. (component tokens live with each component, built ON these.)

   RULES
     - Components reference SEMANTIC tokens, never raw hex or raw px.
     - Spacing/size/radius/elevation/motion come from the SCALES, not literals.
     - Colour-coded meaning always pairs with an icon or label (never colour alone).
     - Keep dark and light in sync: every semantic token is defined for both.

   This file is COPIED verbatim into each repo (like assets/styles.css). Edit it
   here (nautris-web/assets) and re-copy. See DESIGN-SYSTEM.md.
   ========================================================================== */

:root {
  /* ---- 1. PRIMITIVES : palette ------------------------------------------ */
  --ink-950: #05060a;   /* ground */
  --ink-900: #070812;
  --ink-850: #0b0d18;
  --white:   #ffffff;

  --cyan-400:    #35e0ee;  /* brand: electric accent */
  --cyan-500:    #22c7d8;
  --cyan-text-d: #0b7784;  /* WCAG-safe cyan text on a LIGHT ground */
  --violet-400:  #7c6cff;  /* partner accent */
  --emerald-400: #35d6a0;  /* "clean / success" */
  --emerald-text-d: #0c7d5c;
  --amber-400:   #f0a24b;  /* warning */
  --red-400:     #f0776b;  /* danger */

  /* ---- 1. PRIMITIVES : scales (fixed, theme-independent) ---------------- */

  /* spacing — 4px base; use these for padding/gap/margin, never raw px */
  --space-0: 0;      --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;   --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px;  --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px;

  /* type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-caption: 12px; --text-xs: 13px; --text-sm: 14px;  --text-base: 16px;
  --text-lg: 18px;      --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px;
  --text-4xl: 40px;     --text-5xl: 56px;
  --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.7;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

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

  /* motion */
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.4, 1);
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1);

  /* z-index scale — never invent a raw z-index */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000;
  --z-modal: 2000; --z-toast: 3000;

  /* layout */
  --container-max: 1200px;
  --container-wide: 1400px;

  /* ---- 2. SEMANTIC : DARK (default) ------------------------------------- */
  --surface:         var(--ink-950);   /* app background */
  --surface-raised:  var(--ink-900);   /* cards, panels */
  --surface-inset:   rgba(255, 255, 255, 0.02);  /* wells, inputs */
  --surface-hover:   rgba(255, 255, 255, 0.05);  /* row/button hover */
  --surface-active:  rgba(255, 255, 255, 0.08);  /* pressed / selected */
  --overlay:         rgba(7, 8, 18, 0.97);        /* popovers, sticky nav */
  --overlay-soft:    rgba(10, 12, 20, 0.7);
  --scrim:           rgba(3, 4, 8, 0.6);          /* modal backdrop */

  --text-1: #eef1f8;   /* primary */
  --text-2: #99a2b4;   /* secondary */
  --text-3: #626b7d;   /* muted / placeholder */
  --text-on-brand: var(--ink-950);   /* text/icon ON a brand fill */

  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.14);

  --brand:       var(--cyan-400);   /* fills, active nav, primary button */
  --brand-hover: var(--cyan-500);
  --brand-text:  var(--cyan-400);   /* brand-COLOURED TEXT (safe on dark) */
  --accent-violet:  var(--violet-400);
  --accent-emerald: var(--emerald-400);

  --success:      var(--emerald-400); --success-text: var(--emerald-400);
  --warning:      var(--amber-400);   --warning-text: var(--amber-400);
  --danger:       var(--red-400);     --danger-text:  var(--red-400);

  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --elevation-2: 0 4px 14px -2px rgba(0, 0, 0, 0.55);
  --elevation-3: 0 14px 36px -10px rgba(0, 0, 0, 0.65);
  --elevation-4: 0 28px 70px -24px rgba(0, 0, 0, 0.75);
}

:root[data-theme="light"] {
  /* ---- 2. SEMANTIC : LIGHT --------------------------------------------- */
  --surface:         #f5f7fb;
  --surface-raised:  #ffffff;
  --surface-inset:   rgba(11, 16, 32, 0.02);
  --surface-hover:   rgba(11, 16, 32, 0.04);
  --surface-active:  rgba(11, 16, 32, 0.07);
  --overlay:         rgba(255, 255, 255, 0.97);
  --overlay-soft:    rgba(255, 255, 255, 0.8);
  --scrim:           rgba(11, 16, 32, 0.4);

  --text-1: #0b1020;
  --text-2: #3d4557;
  --text-3: #5b6478;
  --text-on-brand: #04121a;

  --border:        rgba(11, 16, 32, 0.1);
  --border-strong: rgba(11, 16, 32, 0.16);

  /* fills keep the electric hue; TEXT roles darken to hold WCAG 4.5:1 */
  --brand-text:     var(--cyan-text-d);
  --success-text:   var(--emerald-text-d);

  --elevation-1: 0 1px 2px rgba(11, 16, 32, 0.08);
  --elevation-2: 0 4px 14px -2px rgba(11, 16, 32, 0.12);
  --elevation-3: 0 14px 36px -10px rgba(11, 16, 32, 0.16);
  --elevation-4: 0 28px 70px -24px rgba(11, 16, 32, 0.22);
}

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