/* =========================================================
   Joachim Wiech — Design Tokens
   Premium Executive · Finance & Controlling
   ========================================================= */

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

:root {
  /* ------- COLOR · BASE ------------------------------------ */

  /* Ink — primary brand color (deep navy) */
  --ink-900: #0B2545;
  --ink-800: #102E55;
  --ink-700: #163A66;
  --ink-600: #1E4A7A;
  --ink-500: #2C5C8E;

  /* Paper — warm off-white canvas */
  --paper-50:  #FBF9F4;
  --paper-100: #F7F4EE;   /* PRIMARY CANVAS */
  --paper-200: #F1ECE2;
  --paper-300: #E6E1D8;

  /* Stone — neutrals */
  --stone-100: #EDE8DE;
  --stone-200: #D9D3C6;
  --stone-300: #B8B0A1;
  --stone-400: #8A8273;
  --stone-500: #5C544A;
  --stone-600: #3F3A33;
  --stone-700: #2A2926;
  --stone-800: #1F1D1B;
  --stone-900: #141312;

  /* Graphite — body type */
  --graphite: #1F1D1B;

  /* Gold — accent only */
  --gold-300: #E0C57A;
  --gold-500: #C8A24B;       /* PRIMARY GOLD */
  --gold-600: #A68534;
  --gold-700: #7E641F;

  /* Semantic */
  --bordeaux:  #7A1F2B;      /* negative variance, alerts */
  --bordeaux-tint: #F0E0E2;
  --sage:      #3F5D4D;      /* positive variance */
  --sage-tint: #DDE5DF;

  /* ------- COLOR · SEMANTIC -------------------------------- */

  --bg:           var(--paper-100);
  --bg-elevated:  var(--paper-50);
  --bg-sunken:    var(--paper-200);
  --bg-inverse:   var(--ink-900);

  --fg-1:         var(--graphite);     /* primary text */
  --fg-2:         var(--stone-600);    /* secondary text */
  --fg-3:         var(--stone-400);    /* muted, captions */
  --fg-inverse:   var(--paper-100);
  --fg-accent:    var(--ink-900);

  --border-1:     var(--paper-300);    /* hairlines on paper */
  --border-2:     var(--stone-200);    /* stronger hairlines */
  --border-inverse: var(--stone-700);  /* hairlines on ink */
  --border-gold:  var(--gold-500);

  --accent:       var(--gold-500);
  --accent-strong: var(--gold-600);

  --positive:     var(--sage);
  --negative:     var(--bordeaux);

  /* ------- TYPE · FAMILIES --------------------------------- */

  --font-sans:    'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Playfair Display', 'GT Sectra', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ------- TYPE · SCALE (px → rem at 16px base) ------------ */

  --text-xs:      0.75rem;   /* 12 — micro labels */
  --text-sm:      0.875rem;  /* 14 — captions */
  --text-base:    1rem;      /* 16 — body */
  --text-lg:      1.125rem;  /* 18 — lead */
  --text-xl:      1.375rem;  /* 22 */
  --text-2xl:     1.75rem;   /* 28 */
  --text-3xl:     2.25rem;   /* 36 */
  --text-4xl:     3rem;      /* 48 */
  --text-5xl:     4rem;      /* 64 */
  --text-6xl:     5.5rem;    /* 88 */

  /* ------- TYPE · WEIGHTS ---------------------------------- */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ------- TYPE · LINE HEIGHTS ----------------------------- */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-loose:   1.75;

  /* ------- TYPE · TRACKING --------------------------------- */

  --track-tight:  -0.02em;
  --track-snug:   -0.01em;
  --track-normal:  0;
  --track-wide:    0.02em;
  --track-wider:   0.08em;     /* small caps / labels */
  --track-widest:  0.18em;     /* wordmark, eyebrow */

  /* ------- SPACING (8pt grid) ------------------------------ */

  --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;

  /* ------- RADII ------------------------------------------- */

  --radius-0:   0;
  --radius-1:   2px;     /* buttons, inputs */
  --radius-2:   4px;     /* cards, modals */
  --radius-pill: 999px;

  /* ------- ELEVATION --------------------------------------- */

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(11, 37, 69, 0.06),
              0 8px 24px -12px rgba(11, 37, 69, 0.10);
  --shadow-2: 0 2px 4px rgba(11, 37, 69, 0.08),
              0 24px 48px -16px rgba(11, 37, 69, 0.14);

  /* ------- MOTION ------------------------------------------ */

  --ease-calm:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-1:  160ms;
  --duration-2:  240ms;
  --duration-3:  360ms;
  --duration-4:  600ms;

  /* ------- LAYOUT ------------------------------------------ */

  --container-prose: 62ch;
  --container-narrow: 880px;
  --container:       1280px;
  --container-wide:  1440px;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Use these on real elements; the vars above are the floor.
   ========================================================= */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11', 'kern';
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — hero numerals, large quote marks */
.t-display {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

/* Headlines */
h1, .t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

h2, .t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Editorial — pull quotes, big numerals */
.t-editorial {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
}

/* Lead paragraph */
.t-lead {
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: var(--container-prose);
}

/* Body */
p, .t-body {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  max-width: var(--container-prose);
}

/* Caption / small */
.t-caption {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

/* Eyebrow — uppercase, tracked label above headlines */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--fg-2);
}

/* Wordmark */
.t-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Mono — figures in tables, code */
code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-feature-settings: 'tnum';
}

/* Rule — hairline divider */
.rule {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}
.rule-gold {
  border: 0;
  border-top: 1px solid var(--gold-500);
  margin: var(--space-5) 0;
}