/* ============================================================
   ORIGADS Design System — tokens
   Source: Charte Graphique by Avenue Jolia
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  /* ---------- Color: base ---------- */
  --beige:          #f2f1e6;   /* C7 M4 J12 N0  — dominant surface */
  --bleu-electrique:#314696;   /* C93 M77 J2 N0 — primary ink */
  --bleu-nuit:      #1f2446;   /* C99 M90 J39 N45 — deep ground */

  /* slight tints for states (computed, not from charter — flag if wrong) */
  --beige-deep:     #e7e6d6;   /* hover surface on beige */
  --beige-soft:     #f8f7ef;   /* near-white beige for subtle contrast */
  --bleu-electrique-deep: #253573; /* pressed state */

  /* gradient — only one allowed, per charter */
  --gradient-origads: linear-gradient(135deg, #314696 0%, #1f2446 100%);

  /* ---------- Semantic colors ---------- */
  --bg:             var(--beige);
  --bg-inverse:     var(--bleu-nuit);
  --fg:             var(--bleu-nuit);
  --fg-muted:       #4a507a;         /* bleu nuit @ ~70% — computed */
  --fg-inverse:     var(--beige);
  --accent:         var(--bleu-electrique);
  --border:         var(--bleu-nuit);
  --border-soft:    #c9c7b6;         /* beige @ 80% — computed */

  /* status — using brand colors only */
  --success:        var(--bleu-electrique);  /* no green; check icon in blue */
  --danger:         var(--bleu-nuit);         /* no red; errors in dark blue */

  /* ---------- Type families ---------- */
  --font-logo:  'Elza Text', 'Archivo Black', 'Montserrat', sans-serif; /* logo only */
  --font-sans:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* for code/data */

  /* ---------- Type scale (rem, 16px base) ---------- */
  --text-12:  0.75rem;
  --text-14:  0.875rem;
  --text-16:  1rem;
  --text-18:  1.125rem;
  --text-20:  1.25rem;
  --text-24:  1.5rem;
  --text-32:  2rem;
  --text-40:  2.5rem;
  --text-56:  3.5rem;
  --text-72:  4.5rem;
  --text-96:  6rem;

  /* ---------- Weights ---------- */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;   /* Montserrat SemiBold — titles */
  --w-bold:     700;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.4;
  --lh-loose:   1.6;

  /* ---------- Tracking ---------- */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-xwide:   0.12em;   /* eyebrows / labels */

  /* ---------- Spacing (8px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-0:    0px;        /* default — brutalist */
  --r-sm:   2px;        /* only for visually-noisy elements */
  --r-pill: 9999px;     /* small tags/badges only */

  /* ---------- Borders ---------- */
  --bw-1: 1px;          /* quiet divider */
  --bw-2: 2px;          /* workhorse */
  --bw-3: 3px;          /* heavy block */
  --bw-4: 4px;          /* hero block */

  /* ---------- Shadows (HARD OFFSET ONLY — no blur) ---------- */
  --sh-sm:  3px 3px 0 var(--bleu-nuit);
  --sh-md:  6px 6px 0 var(--bleu-nuit);   /* default card / button */
  --sh-lg:  10px 10px 0 var(--bleu-nuit); /* hero / modal */
  --sh-xl:  14px 14px 0 var(--bleu-nuit);
  --sh-md-elec: 6px 6px 0 var(--bleu-electrique); /* electric variant */
  --sh-md-beige: 6px 6px 0 var(--beige);          /* on dark surfaces */
  --sh-none: 0 0 0 transparent;

  /* ---------- Motion ---------- */
  --ease-snap:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

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

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: clamp(var(--text-40), 6vw, var(--text-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: clamp(var(--text-32), 4vw, var(--text-56));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-24);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-20);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .p {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-16);
  line-height: var(--lh-loose);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-12);
  letter-spacing: var(--tr-xwide);
  text-transform: uppercase;
}

.lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-20);
  line-height: var(--lh-loose);
}

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

code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--beige-deep);
  padding: 0.1em 0.3em;
  border: 1px solid var(--border);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-snap);
}
a:hover { text-decoration-thickness: 2px; }