/* TF-ART Survey — design tokens (v2, light)
   Porcelain-white robotics-lab palette anchored on the paper figure's own
   design language: white boxes, #D6D6D6 hairlines, #0070C0 letter blue,
   per-phase hue washes lifted verbatim from the Fig. 2 source file.
   Single source of truth for color, type, spacing, motion. */

:root {
  /* --- color (porcelain, 3-level text hierarchy) --- */
  --bg:             #F7F8FA;
  --bg-elev:        #FFFFFF;
  --bg-elev-2:      #EFF2F6;
  --border:         #D6D6D6;   /* the figure's hairline, verbatim */
  --border-strong:  #B9C2CD;
  --text-display:   #101820;
  --text:           #2A323D;
  --text-soft:      #46505E;
  --text-muted:     #6B7686;
  --accent:         #2E6BF2;   /* electric blue — premium brand accent */
  --accent-hot:     #1E54D6;   /* hover darkens on light ground */
  --accent-2:       #A78BFA;   /* soft lavender — gradient partner */
  --accent-spark:   #B7A6FB;   /* lavender spark — topology gradient end */
  --accent-soft:    rgba(46, 107, 242, 0.10);
  --accent-line:    rgba(46, 107, 242, 0.40);
  --accent-warm:    #5B6B7E;   /* steel — mono labels / chapter numbers */
  --accent-fig:      #0070C0;  /* figure's letter blue — explorer fidelity only */
  --accent-fig-soft: rgba(0, 112, 192, 0.10);
  --accent-fig-line: rgba(0, 112, 192, 0.45);

  /* --- figure palette: sampled from the rendered Fig. 2 (verbatim) --- */
  --fig-fusion-head: #DDE5EE;  --fig-fusion-panel: #F0F4F8;
  --fig-p1-head:     #DCE8E3;  --fig-p1-panel:     #F7F9F1;
  --fig-p2-head:     #E6ECDB;  --fig-p2-panel:     #F6F8EF;
  --fig-p3-head:     #ECE3D4;  --fig-p3-panel:     #F9F6EF;
  --fig-side-head:   #E8E4DA;  --fig-side-panel:   #FFFAEC;
  --fig-band-p3:     #EFE7DB;
  --fig-fusion-line: #C6D3E2;
  --fig-p1-line:     #C3D6CC;
  --fig-p2-line:     #CFD8BE;
  --fig-p3-line:     #DCCFB8;
  --fig-side-line:   #D8D0BE;

  /* --- type (Space Grotesk display · Inter Tight body · JetBrains Mono data) ---
     Serif var names are kept from the skeleton but re-pointed to sans so the
     whole forked component layer resolves to this theme. */
  --display:        'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --display-serif:  'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif-display:  'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif-body:     'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
  --sans:           'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont,
                    'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Legacy alias — kept so any unmigrated rule still resolves */
  --serif: var(--serif-body);

  --text-xs:   13px;
  --text-sm:   14.5px;
  --text-base: 17px;
  --text-lg:   18px;
  --text-xl:   21px;
  --text-2xl:  26px;
  --text-3xl:  36px;
  --text-4xl:  50px;
  --hero:      clamp(32px, 4.6vw, 76px);
  --section-h: clamp(26px, 3.6vw, 48px);

  --leading-tight:  1.06;
  --leading-snug:   1.25;
  --leading-normal: 1.66;
  --leading-loose:  1.8;

  --tracking-tight:  -0.035em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.22em;

  /* --- spacing (4px base) --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  --section-gap: min(9vw, 128px);
  --container-w: 1240px;
  --container-pad: clamp(20px, 4vw, 56px);
  --nav-height: 64px;

  /* --- radii --- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* --- motion --- */
  --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:   cubic-bezier(0.25, 1, 0.5, 1);
  --d-fast:     140ms;
  --d-base:     220ms;
  --d-slow:     360ms;

  /* --- depth (soft graphite, layered for premium elevation) --- */
  --shadow-card: 0 0 0 1px var(--border), 0 2px 6px -2px rgba(16, 32, 48, 0.08), 0 18px 40px -22px rgba(16, 32, 48, 0.20);
  --shadow-elev: 0 0 0 1px var(--border-strong), 0 4px 10px -3px rgba(16, 32, 48, 0.10), 0 30px 60px -26px rgba(28, 38, 84, 0.26);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 10px 30px -10px rgba(46, 107, 242, 0.40);

  /* --- aurora wash (premium hero backdrop, electric blue + lavender, softened) --- */
  --aurora:
    radial-gradient(58% 52% at 14% 6%, rgba(46, 107, 242, 0.13), transparent 60%),
    radial-gradient(46% 44% at 90% -4%, rgba(167, 139, 250, 0.13), transparent 58%),
    radial-gradient(60% 64% at 82% 96%, rgba(124, 156, 255, 0.10), transparent 64%);

  /* --- grain (dark noise multiplied over porcelain, very subtle) --- */
  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.16  0 0 0 0 0.22  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* --- blueprint grid (framework explorer backdrop) --- */
  --blueprint-line: rgba(0, 112, 192, 0.045);
  --blueprint-dot:  rgba(0, 112, 192, 0.08);
}