/* =========================================================================
   BASTIDE DESIGN SYSTEM — colors_and_type.css
   Warm institutional, French-flag-inspired.
   ========================================================================= */

/* ---------- Webfonts (Google Fonts substitutions — see README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================
     COLOR — raw palette
     The French tricolore, warmed up. Cream replaces pure white,
     ink-blue replaces cobalt, and a brick-rouge replaces fire-engine red.
     ========================================================= */

  /* Bleu — institutional ink, warm-leaning navy */
  --bleu-900: #0e1a3a;   /* deepest, headings on cream */
  --bleu-800: #142654;   /* primary brand blue */
  --bleu-700: #1d3470;   /* hover */
  --bleu-500: #3a558f;   /* secondary, links */
  --bleu-300: #8aa1c7;   /* muted */
  --bleu-100: #dce4f1;   /* tints, hairlines on blue surfaces */
  --bleu-050: #eef2f9;

  /* Blanc — cream-leaning whites (never pure white) */
  --blanc-000: #fbf8f1;  /* page background — warm parchment */
  --blanc-100: #f5efe2;  /* subtle surface */
  --blanc-200: #ece4d2;  /* cards on dark, dividers */
  --blanc-300: #ddd2b8;  /* sand */

  /* Rouge — terracotta brick, the warmed-French red */
  --rouge-900: #5a1a14;
  --rouge-800: #8a2418;
  --rouge-700: #b03020;   /* primary brand red */
  --rouge-600: #c64a2e;   /* hover */
  --rouge-500: #d96a48;   /* tints */
  --rouge-300: #e8a387;
  --rouge-100: #f6dccf;
  --rouge-050: #fbeee5;

  /* Encre — warm near-black ink (never #000) */
  --encre-900: #1a1612;   /* primary text */
  --encre-800: #2c2620;
  --encre-700: #463d33;
  --encre-600: #5e5346;   /* secondary text */
  --encre-500: #7a6e5e;   /* tertiary / captions */
  --encre-400: #9c9080;
  --encre-300: #bdb09c;
  --encre-200: #d8ccb6;   /* dividers */
  --encre-100: #ebe3d2;

  /* Terre — warm earth supporting tones */
  --terre-ochre: #c89b3c;
  --terre-olive: #6b6f3a;
  --terre-moss:  #4a5a3a;

  /* Functional / status */
  --status-success: #4a7a3a;
  --status-warn:    #c89b3c;
  --status-danger:  #b03020;
  --status-info:    #3a558f;

  /* =========================================================
     COLOR — semantic tokens
     Use these in components, not the raw palette.
     ========================================================= */
  --color-bg:           var(--blanc-000);
  --color-bg-subtle:    var(--blanc-100);
  --color-bg-sunken:    var(--blanc-200);
  --color-bg-inverse:   var(--bleu-900);

  --color-surface:      #fefcf6;          /* cards on the page */
  --color-surface-2:    var(--blanc-100);
  --color-surface-overlay: rgba(26, 22, 18, 0.04);

  --color-fg:           var(--encre-900);
  --color-fg-muted:     var(--encre-600);
  --color-fg-subtle:    var(--encre-500);
  --color-fg-disabled:  var(--encre-400);
  --color-fg-on-dark:   var(--blanc-000);
  --color-fg-on-red:    var(--blanc-000);

  --color-accent:       var(--rouge-700); /* primary action */
  --color-accent-hover: var(--rouge-600);
  --color-accent-press: var(--rouge-800);

  --color-brand:        var(--bleu-800);  /* logos, navigation */
  --color-brand-hover:  var(--bleu-700);

  --color-link:         var(--bleu-700);
  --color-link-hover:   var(--rouge-700);
  --color-link-visited: var(--bleu-900);

  --color-border:       var(--encre-200);
  --color-border-strong:var(--encre-300);
  --color-border-focus: var(--bleu-700);

  --color-success: var(--status-success);
  --color-warn:    var(--status-warn);
  --color-danger:  var(--status-danger);
  --color-info:    var(--status-info);

  /* =========================================================
     TYPE — base
     Fraunces (serif display) for institutional gravitas,
     Inter (humanist sans) for accessibility & body.
     JetBrains Mono for code.
     ========================================================= */
  --font-serif:  'Fraunces', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (modular ~1.20 ratio with display jump) */
  --t-display:   clamp(48px, 5.6vw, 88px);
  --t-h1:        clamp(36px, 3.8vw, 56px);
  --t-h2:        clamp(28px, 2.8vw, 40px);
  --t-h3:        24px;
  --t-h4:        20px;
  --t-h5:        17px;
  --t-body:      16px;
  --t-body-sm:   14px;
  --t-caption:   13px;
  --t-micro:     11px;

  /* Weights (used as pairs with each family) */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;
  --w-display:   500;     /* Fraunces looks right at 500/600 for display */

  /* Line heights */
  --lh-tight:    1.10;
  --lh-snug:     1.25;
  --lh-normal:   1.45;
  --lh-relaxed:  1.62;

  /* Letter spacing */
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-eyebrow:  0.14em;

  /* =========================================================
     SPACING — 4px base, 8px rhythm
     ========================================================= */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* =========================================================
     RADII — restrained, institutional. Mostly 0–6px.
     ========================================================= */
  --radius-0:    0;          /* default: hard edges */
  --radius-1:    2px;
  --radius-2:    4px;        /* default for buttons/inputs */
  --radius-3:    6px;        /* cards */
  --radius-4:    10px;       /* modals */
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS — soft & warm, low opacity, plus a 1px hairline ring
     ========================================================= */
  --shadow-hairline: inset 0 0 0 1px var(--color-border);
  --shadow-1: 0 1px 0 rgba(26,22,18,0.04), 0 1px 2px rgba(26,22,18,0.06);
  --shadow-2: 0 1px 0 rgba(26,22,18,0.04), 0 2px 6px rgba(26,22,18,0.06), 0 6px 16px rgba(26,22,18,0.06);
  --shadow-3: 0 2px 4px rgba(26,22,18,0.06), 0 12px 28px rgba(26,22,18,0.10);
  --shadow-focus: 0 0 0 3px rgba(58,85,143,0.35);   /* bleu focus ring */

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-enter:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-narrow: 720px;
  --container:        1080px;
  --container-wide:   1280px;
  --gutter:           24px;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   These give bare HTML a Bastide feel. Use these as the "house style".
   ========================================================================= */

html {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
}

/* Headings — Fraunces, with optical-size taking over at display sizes */
.h-display, .display {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  font-weight: var(--w-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-variation-settings: "opsz" 144;
  color: var(--color-fg);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-variation-settings: "opsz" 96;
  margin: 0 0 var(--sp-4);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-variation-settings: "opsz" 48;
  margin: 0 0 var(--sp-3);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  font-variation-settings: "opsz" 36;
  margin: 0 0 var(--sp-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0 0 var(--sp-2);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--t-h5);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  font-variation-settings: "opsz" 36;
  color: var(--color-fg-muted);
}

small, .small, .caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

a, .link {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-1) var(--ease-standard);
}
a:hover, .link:hover { color: var(--color-link-hover); }
a:focus-visible      { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-1); }

code, .code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code, .code {
  background: var(--blanc-100);
  padding: 0.12em 0.36em;
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  color: var(--encre-800);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-6) 0;
}

::selection {
  background: var(--rouge-100);
  color: var(--encre-900);
}

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