/* ─────────────────────────────────────────────────────────────
   Ambassaveur · design tokens · v0.1
   Light + dark. CSS variables, Tailwind-theme.extend friendly.
   ───────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500;1,6..72,600&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── Color primitives ─────────────────────────────────────── */
  --color-cream-50:  #FBF7EE;
  --color-cream-100: #F5EFE3;
  --color-cream-200: #EBE3D0;
  --color-cream-300: #DBD0B6;

  --color-ink-50:  #8E806F;
  --color-ink-100: #6B5C4D;
  --color-ink-200: #534538;
  --color-ink-300: #3A2F25;
  --color-ink-400: #2A2118;
  --color-ink-500: #1F1813;
  --color-ink-600: #14100C;

  --color-sienne-50:  #FAEAE0;
  --color-sienne-100: #ECC4AE;
  --color-sienne-200: #DA9776;
  --color-sienne-300: #C56A45;
  --color-sienne-400: #B85230;   /* primary */
  --color-sienne-500: #8E3D22;
  --color-sienne-600: #6E2D17;

  --color-amber-100: #F5D7AC;
  --color-amber-200: #E8AE6E;
  --color-amber-300: #D97A2B;    /* sister-PdJ accent (restrained) */
  --color-amber-400: #B05E15;

  --color-sage-100: #C9CFB8;
  --color-sage-200: #A1AB8A;
  --color-sage-300: #7A8466;     /* secondary calm */
  --color-sage-400: #555E40;

  /* ── Semantic ──────────────────────────────────────────────── */
  --color-bg:            var(--color-cream-100);
  --color-bg-subtle:     var(--color-cream-200);
  --color-bg-elevated:   var(--color-cream-50);
  --color-fg:            var(--color-ink-500);
  --color-fg-soft:       var(--color-ink-200);
  --color-fg-faint:      var(--color-ink-50);
  --color-accent:        var(--color-sienne-400);
  --color-accent-soft:   var(--color-sienne-50);
  --color-accent-fg:     var(--color-cream-50);
  --color-amber:         var(--color-amber-300);
  --color-sage:          var(--color-sage-300);
  --color-border:        rgba(31, 24, 19, 0.10);
  --color-border-strong: rgba(31, 24, 19, 0.18);
  --color-link:          var(--color-sienne-400);
  --color-link-hover:    var(--color-sienne-500);

  /* ── Typography ────────────────────────────────────────────── */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (~1.22 modular, editorial) */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   17px;
  --text-lg:   19px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  88px;
  --text-7xl:  120px;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.06em;
  --tracking-mono:  0.10em;

  /* ── Spacing (4px base) ────────────────────────────────────── */
  --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 (sober) ───────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ── Shadow (sober editorial — never glossy) ──────────────── */
  --shadow-sm: 0 1px 2px rgba(31, 24, 19, 0.04);
  --shadow-md: 0 4px 14px rgba(31, 24, 19, 0.06);
  --shadow-lg: 0 16px 40px rgba(31, 24, 19, 0.09);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.5, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ── Layout ───────────────────────────────────────────────── */
  --container-max: 1240px;
  --container-prose: 680px;
  --gutter: 48px;
  --gutter-mobile: 24px;

  /* ── Hand-drawn underline (signature scribble) ───────────── */
  --scribble-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 C 40 1, 80 9, 120 4 S 180 1, 198 6' stroke='%23B85230' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  --scribble-dark:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 C 40 1, 80 9, 120 4 S 180 1, 198 6' stroke='%23DA9776' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
}

[data-theme="dark"] {
  --color-bg:            #1A1410;
  --color-bg-subtle:     #241D17;
  --color-bg-elevated:   #2A221B;
  --color-fg:            #EFE6D5;
  --color-fg-soft:       #B5A98F;
  --color-fg-faint:      #7E725C;
  --color-accent:        var(--color-sienne-300);
  --color-accent-soft:   #3A1F14;
  --color-accent-fg:     #1A1410;
  --color-border:        rgba(239, 230, 213, 0.10);
  --color-border-strong: rgba(239, 230, 213, 0.18);
  --color-link:          var(--color-sienne-200);
  --color-link-hover:    var(--color-sienne-100);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* ── Accessibility note ──────────────────────────────────────
   --color-fg (#1F1813) on --color-bg (#F5EFE3) → ~14.6:1 (AAA body)
   --color-fg-soft (#534538) on --color-bg → ~8.5:1 (AAA body)
   --color-accent (#B85230) on --color-bg → ~4.7:1 (AA large + AA UI)
   --color-fg dark mode (#EFE6D5) on (#1A1410) → ~13.2:1 (AAA body)
   ───────────────────────────────────────────────────────────── */

/* ── Tailwind v4 mapping (for reference, à coller dans Astro) ──
@theme {
  --color-bg:        var(--color-cream-100);
  --color-fg:        var(--color-ink-500);
  --color-accent:    var(--color-sienne-400);
  --color-amber:     var(--color-amber-300);
  --color-sage:      var(--color-sage-300);
  --font-display:    var(--font-display);
  --font-body:       var(--font-body);
  --font-mono:       var(--font-mono);
  --radius-md:       var(--radius-md);
  ...
}
─────────────────────────────────────────────────────────── */

/* Base reset (minimal — pages layer their own on top) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--color-accent); color: var(--color-accent-fg); }
img, svg { max-width: 100%; display: block; }
a { color: var(--color-link); text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--color-link-hover); }