@import url('./fonts.css');

:root {
  

  /* Paper — the light, near-neutral base the whole system sits on. v4·3:
     neutralised and lifted — only a whisper of warmth remains, no yellow
     cream. Hexes named so intent outlasts. */
  --paper-cream: #FAFAF7;   /* Hero / primary canvas. v8: warm cast pulled (+4 → +3 R−B), a whisper of warmth kept. */
  --paper-bone:  #F2F1EC;   /* Secondary surfaces, cards on cream. */
  --paper-snow:  #FEFEFC;   /* Lightest. Reversed panels, inputs. */
  --paper-edge:  #E4E1DC;   /* Hairlines, rule lines, table dividers. v8: tan pulled out (+11 → +8). */

  /* Pastel companions — sparingly, for tonal sections and figures. */
  --paper-blush: #F7E7D9;   /* Pastel peach. Photo essay, soft section. */
  --paper-sage:  #E8EDDB;   /* Pastel sage. Positive-leaning surfaces. */
  --paper-mist:  #E5E2F2;   /* Pastel lavender. Accent surface. */

  /* Ink — typographic black and its muted companion. Never pure #000. */
  --ink:         #130D26;   /* Body copy, display. Cool near-black, violet-leaning — harmonised with the accent. Never pure #000. */
  --ink-muted:   #6C6A75;   /* Captions, secondary text, metadata. Cool grey; AA holds on cream. */
  --ink-subtle:  #AAACB8;   /* Disabled, tertiary, placeholder. Cool grey — tertiary only, never prose. */

  
  --violet:      #8268FF;
  --violet-ink:  #5544C7;   /* Violet on cream, for text links. AA on cream. */
  --violet-wash: #EEE8FF;   /* Background wash, selection, soft highlight. */

  /* Signal — reserved. Used only in the app kit, never in marketing. */
  --signal-positive: #638041;   /* Warmed from military green */
  --signal-warning:  #B5823A;
  --signal-critical: #A63A2F;

  
  --signal-positive-dark: #2F4A1F;
  --signal-warning-dark:  #4A3414;
  --signal-critical-dark: #4A1814;
  --signal-positive-fg:   #B8D87C;
  --signal-warning-fg:    #E8B86C;
  --signal-critical-fg:   #E89388;

  
  --chart-ink:     var(--ink);          /* Primary series, default. */
  --chart-accent:  var(--violet);       /* The one note, current period. */
  --chart-accent-ink: var(--violet-ink);/* Accent text on cream (AA). */
  --chart-warm:    #B5823A;             /* Third series, tonal. */
  --chart-cool:    #4F7A3E;             /* Fourth series, tonal. */
  --chart-mute:    #AAACB8;             /* Background series, "Other". Tracks --ink-subtle. */
  --chart-grid:    var(--paper-edge);   /* Gridlines, axis ticks. */

  /* Code — syntax-highlighting palette for `.code-block`.
     Lifted from the system's accent + signal hues, calmed for dark bg. */
  --code-keyword: #9E8AFF;   /* Violet, lighter for legibility on ink */
  --code-string:  #C8E29C;   /* Sage, lifted */
  --code-comment: #847B6A;   /* Muted */
  --code-number:  #F7D6A0;   /* Warm amber */
  --code-text:    #D8CEBC;   /* Paper-cream on ink */

  /* Focus — distinct from violet so focus != selection. */
  --focus-ring: 2px solid #FF9E1B;  /* @kind other */
  --focus-offset: 2px;              /* @kind spacing */
  /* Scrim — modal overlay. Ink at 40%. */
  --scrim: rgba(20, 17, 13, 0.42);

  /* Paper-hover — subtle state between cream and bone. */
  --paper-hover: #EDEBE4;

  /* Brand — Improvado's legacy pink. Held in reserve for the mark only.
     Do not extend into UI. */
  --brand-pink:  #FF3186;

  

  --font-sans: 'Raleway', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-app:  'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  
  --fw-light:    300;   /* @kind font */ /* Display, headlines, hero numerals */
  --fw-regular:  400;   /* @kind font */ /* Body, long-form */
  --fw-medium:   500;   /* @kind font */ /* Emphasis, button labels, navigation */
  --fw-emphasis: 600;   /* @kind font */ /* Eyebrows, semibold labels, regular emphasis */
  --fw-cover:    700;   /* @kind font */ 
  --fw-heavy:    800;   /* @kind font */ /* Heaviest register — the single loudest headline on a surface.
                           Display + H1 only, via .t-display-black / .t-h1-black. */

  /* Deprecated aliases — kept for one cycle to ease the rename.
     New work uses --fw-emphasis / --fw-cover / --fw-heavy. */
  --fw-semibold: var(--fw-emphasis);              /* @kind font */
  --fw-bold:     var(--fw-cover);                 /* @kind font */
  --fw-black:    var(--fw-heavy);                 /* @kind font */
  --fw-hairline: 200;                             /* @kind font */

  /* Scale — v3.3: bigger, bolder. Body floors at 18px. Captions never
     below 15px in marketing, never below 13px in dense product UI. */
  --fs-micro:    15px;  /* Eyebrows, small caps, metadata */
  --fs-caption:  16px;  /* Captions, field labels */
  --fs-body:     18px;  /* Default body */
  --fs-lede:     24px;  /* Opening paragraph */
  --fs-h5:       24px;
  --fs-h4:       32px;
  --fs-h3:       44px;
  --fs-h2:       64px;
  --fs-h1:       96px;
  --fs-display:  140px;
  --fs-poster:   200px;

  /* Line-heights — slightly looser at top for modern feel */
  --lh-tight:   0.94;   /* @kind font */ /* Display */
  --lh-snug:    1.04;   /* @kind font */ /* H1–H2 */
  --lh-heading: 1.18;   /* @kind font */ /* H3–H5 */
  --lh-body:    1.55;   /* @kind font */ /* Paragraphs */
  --lh-loose:   1.7;    /* @kind font */ /* Captions, long-form */

  /* Letter-spacing — optical curve. Tighter at display, looser at caps. */
  --ls-poster:   -0.05em;  /* @kind font */ /* 180px+ */
  --ls-display:  -0.045em; /* @kind font */ /* 80–120px */
  --ls-heading:  -0.025em; /* @kind font */ /* 26–52px */
  --ls-body:     0;        /* @kind font */
  --ls-caps:     0.16em;   /* @kind font */ /* Small caps eyebrows */
  --ls-caps-sm:  0.08em;   /* @kind font */

  

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;
  --space-11: 192px;

  

  --radius: 0;
  --radius-mark: 9999px; /* For the im mark only. */

  
  --radius-sm:   6px;     /* Tags, status pills, kbd, badges */
  --radius-md:   10px;    /* Buttons, inputs, dropdowns, toasts */
  --radius-lg:   14px;    /* Cards, modals, large surfaces */
  --radius-pill: 999px;   /* Avatars, small pill chips */

  

  --rule-hair:    1px solid var(--paper-edge);
  --rule-ink:     1px solid var(--ink);
  --rule-heavy:   2px solid var(--ink);
  --rule-double:  4px double var(--ink); /* Masthead, title dividers */

  

  --shadow-none:  none;
  --elev-1:       0 1px 2px rgba(20, 17, 13, 0.06);     /* Buttons hover */
  --elev-2:       0 4px 12px -2px rgba(20, 17, 13, 0.08); /* Cards hover, dropdowns */
  --elev-3:       0 12px 32px -4px rgba(20, 17, 13, 0.14); /* Tooltips, popovers */
  --shadow-modal: 0 24px 64px -16px rgba(20, 17, 13, 0.18);

  

  --motion-fast:  140ms cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
  --motion-base:  240ms cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
  --motion-slow:  480ms cubic-bezier(0.2, 0, 0, 1);  /* @kind other */

  /* ---------------------------------------------------------------------
     8. LAYOUT — 12-col editorial grid
     --------------------------------------------------------------------- */

  --max-width:   1440px;
  --gutter:      var(--space-6);
  --col:         12;            /* @kind other */
}



[data-density="app"] {
  --font-sans:   var(--font-app);   /* Body switches to Manrope on app surfaces */

  
  --paper-cream: #FAFAF8;   /* App canvas — warm off-white. */
  --paper-bone:  #F3F2EE;   /* Sidebars, rails, resting cards. */
  --paper-snow:  #FFFFFF;   /* Content surfaces, inputs, top bar — pure white. */
  --paper-edge:  #E7E4DD;   /* Hairlines, dividers — warm grey. */
  --paper-hover: #EFEDE8;   /* Row / nav hover. */

  /* Type scale — tighter floor for density. Captions can reach 12px in
     dense product UI; nothing smaller. */
  --fs-micro:    12px;
  --fs-caption:  13px;
  --fs-body:     14px;
  --fs-lede:     18px;
  --fs-h5:       18px;
  --fs-h4:       22px;
  --fs-h3:       28px;
  --fs-h2:       40px;
  --fs-h1:       56px;

  /* Rhythm — tighter line-heights and gutters for density. */
  --lh-body:     1.45;   /* @kind font */
  --lh-loose:    1.55;   /* @kind font */
  --gutter:      var(--space-5);
  --max-width:   100%;

  /* Motion — faster transitions feel correct at density. */
  --motion-fast: 100ms cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --motion-base: 180ms cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
}



[data-theme="ink"] {
  --paper-cream: #1A1612;
  --paper-bone:  #221E18;
  --paper-snow:  #0F0D0A;
  --paper-edge:  #322D24;

  --paper-blush: #2A211C;
  --paper-sage:  #1F2418;
  --paper-mist:  #1F1D2D;

  --ink:         #FBF6EC;
  --ink-muted:   #B4AC98;
  --ink-subtle:  #6F6A5E;

  --violet:      #9A85FF;
  --violet-ink:  #C6B8FF;
  --violet-wash: #2A2344;

  --rule-hair:  1px solid var(--paper-edge);
  --rule-ink:   1px solid var(--ink);
  --rule-heavy: 2px solid var(--ink);
  --rule-double: 4px double var(--ink);
}

/* Icon — standard inline utility */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 24px; height: 24px; }

/* =========================================================================
   RESET — Minimal, editorial
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; hanging-punctuation: first last; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Focus — editorial amber ring, never default blue */
*:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Balance headlines; pretty-wrap body */
h1, h2, h3, .t-display, .t-h1, .t-h2 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Tabular numerals default in tables and data contexts */
td.num, th.num, .num, .t-num, [data-num] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper-cream);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Selection — the one place violet wash appears everywhere. */
::selection { background: var(--violet-wash); color: var(--ink); }

/* Links — ink by default, violet-ink on hover. Underline offset. */
a {
  color: inherit;
  text-decoration-color: var(--paper-edge);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--motion-fast), text-decoration-color var(--motion-fast);
}
a:hover { color: var(--violet-ink); text-decoration-color: var(--violet); }

/* Headings inherit scale from tokens; no default margins. */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-medium); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }



.t-eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--ink-muted);
}

.t-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}


.t-display-heavy {
  font-size: var(--fs-display);
  font-weight: var(--fw-cover);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em; /* Heavier weight wants slightly less negative tracking */
}
.t-h1-heavy {
  font-size: var(--fs-h1);
  font-weight: var(--fw-cover);
  line-height: var(--lh-snug);
  letter-spacing: -0.035em;
}
.t-h2-heavy {
  font-size: var(--fs-h2);
  font-weight: var(--fw-cover);
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
}
.t-h3-heavy {
  font-size: var(--fs-h3);
  font-weight: var(--fw-cover);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
}
/* Black — the heaviest register, 800. Display and H1 only; reserve for the
   single loudest headline on a surface (covers, poster numerals, hero). */
.t-display-black {
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: -0.045em;
}
.t-h1-black {
  font-size: var(--fs-h1);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  letter-spacing: -0.04em;
}

.t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--ls-display); }
.t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: -0.015em; }
.t-h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: -0.005em; }

.t-lede { font-size: var(--fs-lede); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.t-body { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.t-caption { font-size: var(--fs-caption); font-weight: var(--fw-regular); line-height: var(--lh-loose); color: var(--ink-muted); }
.t-micro { font-size: var(--fs-micro); font-weight: var(--fw-medium); line-height: var(--lh-loose); color: var(--ink-muted); letter-spacing: var(--ls-caps-sm); text-transform: uppercase; }

.t-quote {
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

/* Number display — tabular figures for data. */
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Additional roles from the polish audit */
.t-pull {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.t-subtitle {
  font-size: var(--fs-lede);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--ink-muted);
  max-width: 62ch;
}
.t-meta-caps {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }

/* Drop cap for long-form */
.dropcap::first-letter {
  font-weight: var(--fw-light);
  font-size: 5.4em;
  float: left;
  line-height: 0.85;
  margin: 0.04em 0.08em 0 0;
  color: var(--ink);
}