/* ============================================================
   SIMPERIC DESIGN SYSTEM — Colors & Type
   ============================================================
   Dark forest green + cream — distinguished, institutional,
   premium. Inspired by Hermès, French private banking, and
   the Bleu de France civic tradition (translated to green).
   ============================================================ */

/* Fonts are self-hosted (site/fonts/*.woff2) and declared via @font-face in styles.css - no third-party requests. */

:root {
  /* ---------- COLOR TOKENS ---------- */

  /* Forest — primary brand green. Quiet, deep, institutional. */
  --forest-950: #0E1A14;   /* near-black, signature */
  --forest-900: #15281E;   /* primary brand */
  --forest-800: #1C3528;   /* hover surfaces */
  --forest-700: #264634;   /* pressed / borders on dark */
  --forest-600: #355A45;
  --forest-500: #4A7359;
  --forest-400: #6E9580;
  --forest-300: #9BB8A8;
  --forest-200: #C7D9CE;
  --forest-100: #E3ECE6;
  --forest-50:  #F1F5F2;

  /* Cream — warm off-white background, paper-like. */
  --cream-50:  #FBF8F1;   /* page background */
  --cream-100: #F5EFE2;   /* card / panel */
  --cream-200: #ECE3D0;   /* divider, subtle fill */
  --cream-300: #DCCDB0;   /* warm accent */
  --cream-400: #C2AE85;

  /* Brass — restrained metallic accent. Use sparingly. */
  --brass-700: #8C6E2F;
  --brass-600: #A68842;
  --brass-500: #C2A55E;
  --brass-300: #E4D3A6;

  /* Ink — neutral for body text on cream. */
  --ink-900: #1A1A17;
  --ink-700: #3A3A35;
  --ink-500: #6B6B63;
  --ink-300: #A8A89E;
  --ink-200: #CFCEC4;
  --ink-100: #E8E6DC;

  /* Semantic — tuned to the forest/cream/brass world. Muted, never neon. */
  --success: #4A7359;   /* forest-500, success reads as "validated within brand" */
  --warning: #A68842;   /* brass-600, the canonical accent */
  --danger:  #8C3A2E;   /* deep oxblood, harmonised with brass */
  --info:    #355A45;   /* forest-600, never blue */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg-page:        var(--cream-50);
  --bg-surface:     #FFFFFF;
  --bg-panel:       var(--cream-100);
  --bg-inverse:     var(--forest-900);
  --bg-inverse-2:   var(--forest-800);

  --fg-primary:     var(--ink-900);
  --fg-secondary:   var(--ink-700);
  --fg-tertiary:    var(--ink-500);
  --fg-on-inverse:  var(--cream-50);
  --fg-on-inverse-2:var(--forest-200);
  --fg-brand:       var(--forest-900);
  --fg-accent:      var(--brass-600);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-inverse: var(--forest-700);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Cormorant Garamond", "Garamond", "EB Garamond", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display:  72px;    --lh-display:  1.02;   --tr-display:  -0.025em;
  --fs-h1:       56px;    --lh-h1:       1.05;   --tr-h1:       -0.022em;
  --fs-h2:       40px;    --lh-h2:       1.1;    --tr-h2:       -0.018em;
  --fs-h3:       28px;    --lh-h3:       1.2;    --tr-h3:       -0.012em;
  --fs-h4:       20px;    --lh-h4:       1.3;    --tr-h4:       -0.005em;
  --fs-lead:     20px;    --lh-lead:     1.5;    --tr-lead:      0;
  --fs-body:     16px;    --lh-body:     1.6;    --tr-body:      0;
  --fs-small:    14px;    --lh-small:    1.5;    --tr-small:     0;
  --fs-caption:  12px;    --lh-caption:  1.4;    --tr-caption:   0.02em;
  --fs-overline: 11px;    --lh-overline: 1.2;    --tr-overline:  0.18em;

  /* ---------- SPACING (4px base) ---------- */
  --space-0:  0;
  --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;

  /* ---------- RADIUS ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Soft, paper-like; never harsh blue shadows. */
  --shadow-xs: 0 1px 2px rgba(26, 26, 23, 0.04);
  --shadow-sm: 0 2px 6px rgba(26, 26, 23, 0.06), 0 1px 2px rgba(26, 26, 23, 0.04);
  --shadow-md: 0 6px 16px rgba(26, 26, 23, 0.08), 0 2px 4px rgba(26, 26, 23, 0.04);
  --shadow-lg: 0 16px 36px rgba(26, 26, 23, 0.10), 0 4px 8px rgba(26, 26, 23, 0.05);
  --shadow-inset: inset 0 1px 2px rgba(26, 26, 23, 0.06);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Apply via class or extend in components.
   ============================================================ */

.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg-primary);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  color: var(--fg-primary);
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  color: var(--fg-primary);
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  color: var(--fg-primary);
}

.t-h4, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4);
  color: var(--fg-primary);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg-secondary);
}

.t-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
}

.t-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-secondary);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
  color: var(--fg-tertiary);
}

.t-overline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.t-mono, code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: -0.01em;
  color: var(--fg-secondary);
}

/* Numerals: always tabular for data, lining for headings */
.t-tabular { font-variant-numeric: tabular-nums lining-nums; }

/* Editorial counter-style numerals (used for "01 / 02 / 03") */
.t-counter {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--fg-accent);
  font-variant-numeric: tabular-nums;
}