/* =====================================================
   inveni — Foundation Tokens (colors + type)
   Import this once at the top of any inveni surface.
   =====================================================
   Brand metaphor: papers are countless stars in the sky;
   inveni funnels the relevant ones to the reader.
   The system is built around an "ink + paper + signal"
   dual surface — a deep night view for the app, and a
   warm parchment view for editorial / marketing.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -----------------------------------------------------
     COLOR — Ink Palette (default app surface)
     ----------------------------------------------------- */
  --ink-900:    #07091A;   /* deepest night, page bg */
  --ink-800:    #0A0E1A;   /* primary canvas        */
  --ink-700:    #111827;   /* card / panel surface  */
  --ink-600:    #1A2238;   /* raised surface        */
  --ink-500:    #243049;   /* subtle divider, hover */
  --ink-400:    #364158;   /* disabled stroke       */

  /* -----------------------------------------------------
     COLOR — Paper Palette (editorial / light surface)
     ----------------------------------------------------- */
  --paper-50:   #FAF7F0;   /* warm parchment, page bg */
  --paper-100:  #F2EDE0;
  --paper-200:  #E6DFCD;
  --paper-300:  #C9C0AB;
  --paper-400:  #8E8770;
  --paper-900:  #1B1A14;   /* ink-on-paper text */

  /* -----------------------------------------------------
     COLOR — Foreground / text (semantic)
     ----------------------------------------------------- */
  --fg-1:       #F5F1E8;   /* primary on ink, ~paper */
  --fg-2:       #B6BCCC;   /* secondary on ink       */
  --fg-3:       #7A8198;   /* tertiary / muted       */
  --fg-4:       #4F576B;   /* placeholder            */

  --fg-inv-1:   #1B1A14;   /* primary on paper       */
  --fg-inv-2:   #4A4A3D;   /* secondary on paper     */
  --fg-inv-3:   #8E8770;   /* tertiary on paper      */

  /* -----------------------------------------------------
     COLOR — Signal (reserved for system, not chrome)
     The brand is monochrome — signal hues are used
     sparingly to mark relevance, alerts and progress.
     ----------------------------------------------------- */
  --signal-azure:   #6FA8FF;   /* relevance, links     */
  --signal-violet:  #A78BFA;   /* a paper-as-star      */
  --signal-amber:   #E5B25D;   /* warm, a saved item   */
  --signal-leaf:    #6FBF8B;   /* positive / success   */
  --signal-rose:    #E07A6E;   /* dismiss / negative   */

  /* glows used for hover/focus rings on dark */
  --glow-azure:   0 0 24px rgba(111,168,255,.22);
  --glow-violet:  0 0 24px rgba(167,139,250,.22);

  /* -----------------------------------------------------
     COLOR — Surfaces, borders, overlays
     ----------------------------------------------------- */
  --surface-glass:   rgba(255,255,255,0.04);
  --surface-raised:  rgba(255,255,255,0.06);
  --surface-sunken:  rgba(0,0,0,0.25);
  --border-hair:     rgba(245,241,232,0.08);   /* 1px hairline on ink */
  --border-soft:     rgba(245,241,232,0.14);
  --border-ink:      rgba(27,26,20,0.10);      /* 1px hairline on paper */
  --border-ink-soft: rgba(27,26,20,0.18);

  --scrim-strong:    rgba(7,9,26,0.78);
  --scrim-soft:      rgba(7,9,26,0.45);

  /* -----------------------------------------------------
     SHADOW / ELEVATION
     The brand favours soft, low-spread shadows over
     hard drop-shadows. On ink we lean on inner glow.
     ----------------------------------------------------- */
  --elev-1: 0 1px 2px rgba(0,0,0,0.30);
  --elev-2: 0 4px 16px rgba(0,0,0,0.32);
  --elev-3: 0 12px 40px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.04) inset;
  --elev-4: 0 24px 80px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.05) inset;
  --elev-paper-1: 0 1px 2px rgba(27,26,20,0.06);
  --elev-paper-2: 0 4px 18px rgba(27,26,20,0.08);

  /* -----------------------------------------------------
     RADIUS — paper-edge rounding
     ----------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* -----------------------------------------------------
     SPACING — 4 px base
     ----------------------------------------------------- */
  --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
     inveni motion is gentle, paper-like — no bounces.
     ----------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;   /* micro: hover, press        */
  --dur-2: 240ms;   /* default: panels, fades     */
  --dur-3: 420ms;   /* large: page, deck swipe    */
  --dur-4: 700ms;   /* ambient / star-twinkle     */

  /* -----------------------------------------------------
     TYPE — Families
     Display: Cormorant Garamond — same family as the
              wordmark; carries the editorial voice.
     Body:    Inter — small caps + tabular friendly,
              workhorse for UI and abstracts.
     Mono:    JetBrains Mono — IDs, scores, arXiv refs.
     ----------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -----------------------------------------------------
     TYPE — Scale (px values; line-heights tuned for prose)
     ----------------------------------------------------- */
  --t-display-xl: 96px;   --t-display-xl-lh: 1.02;
  --t-display-l:  64px;   --t-display-l-lh:  1.06;
  --t-display-m:  48px;   --t-display-m-lh:  1.10;
  --t-display-s:  36px;   --t-display-s-lh:  1.14;

  --t-h1: 32px;   --t-h1-lh: 1.20;
  --t-h2: 24px;   --t-h2-lh: 1.28;
  --t-h3: 20px;   --t-h3-lh: 1.32;
  --t-h4: 17px;   --t-h4-lh: 1.36;

  --t-body-l: 17px; --t-body-l-lh: 1.62;
  --t-body:   15px; --t-body-lh:   1.60;
  --t-body-s: 13px; --t-body-s-lh: 1.55;
  --t-caption:12px; --t-caption-lh:1.45;
  --t-micro:  11px; --t-micro-lh:  1.40;

  --t-eyebrow-tracking: 0.18em;   /* uppercase eyebrows */
  --t-display-tracking: -0.02em;  /* tighten serif display */
}

/* =====================================================
   SEMANTIC TYPE CLASSES
   Use these directly in markup; do NOT restyle h1/h2 etc
   without scoping — we leave native heading sizes alone.
   ===================================================== */

.t-display-xl,
.t-display-l,
.t-display-m,
.t-display-s {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--t-display-tracking);
  color: var(--fg-1);
  text-wrap: balance;
}
.t-display-xl { font-size: var(--t-display-xl); line-height: var(--t-display-xl-lh); }
.t-display-l  { font-size: var(--t-display-l);  line-height: var(--t-display-l-lh); }
.t-display-m  { font-size: var(--t-display-m);  line-height: var(--t-display-m-lh); }
.t-display-s  { font-size: var(--t-display-s);  line-height: var(--t-display-s-lh); }

.t-display-italic { font-style: italic; font-weight: 500; }

.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  font-weight: 600;
}
.t-h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); }
.t-h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); }
.t-h3 { font-size: var(--t-h3); line-height: var(--t-h3-lh); }
.t-h4 { font-size: var(--t-h4); line-height: var(--t-h4-lh); }

.t-body-l { font-family: var(--font-sans); font-size: var(--t-body-l); line-height: var(--t-body-l-lh); color: var(--fg-1); }
.t-body   { font-family: var(--font-sans); font-size: var(--t-body);   line-height: var(--t-body-lh);   color: var(--fg-1); }
.t-body-s { font-family: var(--font-sans); font-size: var(--t-body-s); line-height: var(--t-body-s-lh); color: var(--fg-2); }
.t-caption{ font-family: var(--font-sans); font-size: var(--t-caption);line-height: var(--t-caption-lh); color: var(--fg-3); }
.t-micro  { font-family: var(--font-sans); font-size: var(--t-micro);  line-height: var(--t-micro-lh);  color: var(--fg-3); }

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--t-eyebrow-tracking);
  color: var(--fg-3);
}

.t-mono   { font-family: var(--font-mono); font-size: 12px; font-feature-settings: 'tnum'; color: var(--fg-2); }
.t-quote  { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--fg-1); text-wrap: pretty; }

/* =====================================================
   PAPER / INK MODE HELPERS
   Apply on a wrapper element to flip surface + text.
   ===================================================== */
.surface-ink {
  background: var(--ink-800);
  color: var(--fg-1);
}
.surface-paper {
  background: var(--paper-50);
  color: var(--fg-inv-1);
}
.surface-paper .t-body-s,
.surface-paper .t-caption,
.surface-paper .t-micro { color: var(--fg-inv-2); }
.surface-paper .t-eyebrow { color: var(--fg-inv-3); }
.surface-paper .t-display-xl,
.surface-paper .t-display-l,
.surface-paper .t-display-m,
.surface-paper .t-display-s,
.surface-paper .t-h1,
.surface-paper .t-h2,
.surface-paper .t-h3,
.surface-paper .t-h4 { color: var(--fg-inv-1); }