/* ============================================================
   Wallace Design System — Tokens
   v0.1 · Drop-in for any stack (plain CSS, Tailwind @theme, etc.)
   ============================================================ */

:root {
  /* --- FAMILIES ---------------------------------------------------- */
  --font-sans: 'Aeonik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Aeonik Mono Pro', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-heading: var(--font-sans);
  --font-manuscript: Georgia, 'Times New Roman', serif;
  --font-marker: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;

  /* --- TYPE SCALE (size / line-height / weight / tracking) -------- */
  /* H1 */
  --fs-h1: 54px;  --lh-h1: 1.1;  --fw-h1: 700; --ls-h1: 0;
  /* H2 */
  --fs-h2: 42px;  --lh-h2: 1.1;  --fw-h2: 700; --ls-h2: 0;
  /* H3 */
  --fs-h3: 32px;  --lh-h3: 1.1;  --fw-h3: 700; --ls-h3: 0;
  /* H4 */
  --fs-h4: 24px;  --lh-h4: 1.1;  --fw-h4: 700; --ls-h4: 0;
  /* H5 */
  --fs-h5: 20px;  --lh-h5: 1.1;  --fw-h5: 700; --ls-h5: 0;
  /* H6 */
  --fs-h6: 18px;  --lh-h6: 1.1;  --fw-h6: 700; --ls-h6: 0;

  /* Subtitles */
  --fs-sub-m: 16px; --lh-sub-m: 1.1; --fw-sub-m: 500;
  --fs-sub-s: 14px; --lh-sub-s: 1.1; --fw-sub-s: 500;

  /* Body */
  --fs-body-l:  18px; --lh-body-l: 1.4; --fw-body-l: 400;
  --fs-body-m:  16px; --lh-body-m: 1.4; --fw-body-m: 400;
  --fs-body-s:  14px; --lh-body-s: 1.4; --fw-body-s: 400;
  --fs-body-xs: 12px; --lh-body-xs: 1.4; --fw-body-xs: 400;
  --fs-body-xxs:10px; --lh-body-xxs:1.4; --fw-body-xxs:400;

  /* Caption / Buttons / Tabs */
  --fs-caption: 20px; --lh-caption: 1.0; --fw-caption: 700; --ls-caption: 1px;
  --fs-btn-l:   20px; --lh-btn-l:   1.0; --fw-btn-l:   500; --ls-btn-l: 0.5px;
  --fs-btn-m:   16px; --lh-btn-m:   1.0; --fw-btn-m:   500; --ls-btn-m: 0.5px;
  --fs-btn-s:   14px; --lh-btn-s:   1.0; --fw-btn-s:   500; --ls-btn-s: 0.5px;
  --fs-tabs:    16px; --lh-tabs:    1.0; --fw-tabs:    500; --ls-tabs: 0;

  /* --- COLOR · NEUTRALS ------------------------------------------- */
  --paper:      #FFFFFF;
  --canvas:     #FAFAF8;
  --panel-warm: #F3F2F2;
  --panel-warm-2:#F1F0F0;
  --panel-cool: #F0F0F3;
  --hairline:   #EAEAEC;

  --g-100: #E3E3E3;
  --g-200: #D6D6D6;
  --g-300: #BFBFBF;
  --g-400: #9A9A9A;
  --g-500: #797878;
  --g-600: #5C5C5C;
  --g-700: #3D3D3D;

  --k-100: #2A2A2A;   /* charcoal */
  --k-200: #19191A;   /* near-black  ← default text */
  --k-300: #0D0D0E;   /* ink */
  --k-pure:#000000;

  /* --- COLOR · LIME (primary) ------------------------------------- */
  --lime-50:  #F7FFCC;
  --lime-100: #EEFF80;
  --lime-200: #E2FF43;   /* ★ PRIMARY */
  --lime-300: #C7E635;
  --lime-350: #CEED0C;   /* stroke · button depth edge */
  --lime-400: #A6BF2A;
  --lime-500: #7A8F1E;
  --lime-600: #4F5D12;

  /* --- COLOR · MINT (success) ------------------------------------- */
  --mint-100: #B6F5D0;
  --mint-300: #4DE08E;
  --mint-500: #10D763;
  --mint-700: #0A9E48;

  /* --- COLOR · FOREST (deep / wordmark) --------------------------- */
  --forest-100: #B3D9CD;
  --forest-300: #3FA087;
  --forest-500: #127F66;
  --forest-700: #0B5547;

  /* --- COLOR · CORAL (warn / don't) ------------------------------- */
  --coral-100: #FFE6D8;
  --coral-300: #FFD7C2;
  --coral-500: #FF6B5C;

  /* --- PASTEL COMPAT LAYER (categorical badges only) -------------- */
  /* Sourced 1:1 from App.css. Used for source-type tags in app demos
     embedded across the marketing site (arXiv blue, DOI lavender, etc). */
  --pastel-blue:     #B5CBE0;
  --pastel-peach:    #F5CEB0;
  --pastel-yellow:   #EDE8C0;
  --pastel-lavender: #DCD3E7;
  --pastel-sage:     #C5CCAB;
  --pastel-pink:     #F0BFC5;

  /* --- LINK COLOR ------------------------------------------------- */
  --link:       var(--forest-700);
  --link-hover: var(--forest-500);

  /* --- SEMANTIC ROLES --------------------------------------------- */
  --bg:            var(--canvas);
  --surface:       var(--paper);
  --surface-muted: var(--panel-warm);
  --surface-cool:  var(--panel-cool);
  --border:        var(--hairline);
  --text:          var(--k-200);
  --text-muted:    var(--g-500);
  --text-subtle:   var(--g-400);
  --accent:        var(--lime-200);
  --accent-stroke: var(--lime-350);
  --accent-hover:  var(--lime-300);
  --accent-active: var(--lime-400);
  --success:       var(--mint-500);
  --warning:       var(--lime-400);
  --danger:        var(--coral-500);
  --brand:         var(--forest-500);

  /* --- RADII ------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;      /* ★ default for cards + buttons */
  --r-2xl: 28px;
  --r-full: 9999px;
  --r-pill: var(--r-full);

  /* --- ELEVATION (very subtle) ------------------------------------ */
  --e-0: none;
  --e-1: 0 1px 1px rgba(13,13,14,0.02);
  --e-2: 0 1px 2px rgba(13,13,14,0.03);
  --e-3: 0 2px 6px rgba(13,13,14,0.04);
  --e-4: 0 6px 14px rgba(13,13,14,0.05);
  --e-5: 0 12px 28px rgba(13,13,14,0.07);

  /* --- SPACING (4 px grid) ---------------------------------------- */
  --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;

  /* --- MOTION ------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ---- Dark surface override (opt-in via [data-theme="dark"]) ------ */
[data-theme="dark"] {
  --bg:            var(--k-200);
  --surface:       var(--k-100);
  --surface-muted: #222223;
  --border:        #2B2B2C;
  --text:          var(--panel-warm);
  --text-muted:    var(--g-400);
  --text-subtle:   var(--g-500);
}

/* ---- Type helper classes (optional) ----------------------------- */
.t-h1 { font: var(--fw-h1)   var(--fs-h1)/var(--lh-h1)   var(--font-sans); letter-spacing: var(--ls-h1); }
.t-h2 { font: var(--fw-h2)   var(--fs-h2)/var(--lh-h2)   var(--font-sans); letter-spacing: var(--ls-h2); }
.t-h3 { font: var(--fw-h3)   var(--fs-h3)/var(--lh-h3)   var(--font-sans); }
.t-h4 { font: var(--fw-h4)   var(--fs-h4)/var(--lh-h4)   var(--font-sans); }
.t-h5 { font: var(--fw-h5)   var(--fs-h5)/var(--lh-h5)   var(--font-sans); }
.t-h6 { font: var(--fw-h6)   var(--fs-h6)/var(--lh-h6)   var(--font-sans); }
.t-sub-m { font: var(--fw-sub-m) var(--fs-sub-m)/var(--lh-sub-m) var(--font-sans); }
.t-sub-s { font: var(--fw-sub-s) var(--fs-sub-s)/var(--lh-sub-s) var(--font-sans); }
.t-body-l  { font: var(--fw-body-l)  var(--fs-body-l)/var(--lh-body-l)   var(--font-sans); }
.t-body-m  { font: var(--fw-body-m)  var(--fs-body-m)/var(--lh-body-m)   var(--font-sans); }
.t-body-s  { font: var(--fw-body-s)  var(--fs-body-s)/var(--lh-body-s)   var(--font-sans); }
.t-body-xs { font: var(--fw-body-xs) var(--fs-body-xs)/var(--lh-body-xs) var(--font-sans); }
.t-caption { font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-sans); letter-spacing: var(--ls-caption); text-transform: uppercase; }
.t-btn-l   { font: var(--fw-btn-l) var(--fs-btn-l)/var(--lh-btn-l) var(--font-sans); letter-spacing: var(--ls-btn-l); }
.t-btn-m   { font: var(--fw-btn-m) var(--fs-btn-m)/var(--lh-btn-m) var(--font-sans); letter-spacing: var(--ls-btn-m); }
.t-btn-s   { font: var(--fw-btn-s) var(--fs-btn-s)/var(--lh-btn-s) var(--font-sans); letter-spacing: var(--ls-btn-s); }
.t-tabs    { font: var(--fw-tabs) var(--fs-tabs)/var(--lh-tabs) var(--font-sans); }