/* ============================================================
   ADITOR ATLAS — design tokens (inlined from design-system)
   Self-contained so this deploys cleanly as a Cloudflare Pages
   static site from platform/atlas/ as document root.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* canvas & surfaces */
  --bg-canvas:        #0B0B0D;
  --surface-sunken:   #08080A;
  --surface-raised:   #111114;
  --surface-elevated: #17171B;

  --halo-orange:      rgba(255,107,53,0.10);
  --halo-steel:       rgba(143,185,230,0.06);

  --glass-fill:       rgba(255,255,255,0.035);
  --glass-border:     rgba(255,255,255,0.08);
  --glass-highlight:  rgba(255,255,255,0.06);

  /* ink */
  --ink-1: #F5F5F2;
  --ink-2: #A8A8A4;
  --ink-3: #6B6B68;
  --ink-4: #2E2E30;

  /* brand */
  --brand:       #FF6B35;
  --brand-hi:    #FF7A3D;
  --brand-lo:    #E8552A;
  --brand-soft:  #E8824A;
  --brand-deep:  #C44D1E;
  --brand-30: rgba(255,107,53,0.30);
  --brand-10: rgba(255,107,53,0.10);
  --brand-06: rgba(255,107,53,0.06);
  --brand-04: rgba(255,107,53,0.04);
  --brand-gradient: linear-gradient(135deg,#FF7A3D 0%,#E8552A 100%);
  --brand-glow: 0 8px 32px rgba(255,107,53,0.22);

  --steel: #8FB9E6;
  --steel-soft: rgba(143,185,230,0.12);

  /* semantic */
  --error:        #B84343;
  --error-soft:   rgba(184,67,67,0.12);
  --success:      #7FA776;
  --success-soft: rgba(127,167,118,0.12);
  --warn:         #C8A24A;
  --warn-soft:    rgba(200,162,74,0.12);

  /* type families — briefed Google Fonts */
  --font-serif: "Instrument Serif", Times, serif;
  --font-sans:  "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700;

  --t-display: 72px; --t-h1: 56px; --t-h2: 40px; --t-h3: 28px; --t-h4: 20px;
  --t-body-lg: 18px; --t-body: 15px; --t-body-sm: 13px;
  --t-meta: 12px; --t-micro: 11px;

  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.65;
  --track-display: -0.025em; --track-h: -0.02em; --track-body: 0em;
  --track-mono: 0.14em; --track-eyebrow: 0.3em;

  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  /* radii */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-xl: 0 24px 80px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 32px rgba(255,107,53,0.18);
  --shadow-inner-top: inset 0 1px 0 rgba(255,255,255,0.06);

  /* atlas-specific */
  --canvas-w: 1440px;
  --canvas-h: 1060px;
  --edge-stroke: var(--ink-4);
  --edge-arrow: var(--brand-hi);
  --grid-8: 8px;

  /* motion — the single allowed easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 180ms;
  --dur-card: 320ms;
  --dur-view: 520ms;
  --dur-fast: 180ms; --dur-base: 260ms; --dur-slow: 400ms;
}

::selection { background: var(--brand-30); color: var(--ink-1); }