/* =========================================================
   ACALIZ · Objet Pop Design System
   colors_and_type.css
   Single source of truth for color + type tokens.
   ========================================================= */

/* Polices auto-hébergées (fix RGPD 12/07/2026) : ne pas repointer vers Google Fonts. */
@import url('fonts/fonts-bricolage.css');

:root {
  /* ---------- Signature palette ---------- */
  --mimosa: #FFD23F;        /* signature highlight */
  --mimosa-ink: #FFC700;    /* hover / pressed mimosa */
  --corail: #FF6B47;        /* secondary CTA, positive accents */
  --corail-ink: #E8552F;
  --noir: #0F0F0F;          /* text, structure, primary buttons */
  --noir-soft: #1F1F1F;     /* hover for noir */
  --creme: #FDFCFA;         /* background · never pure white */
  --creme-deep: #F4F1EA;    /* card-on-card, subtle surfaces */

  /* ---------- Neutral inks (editorial, low contrast) ---------- */
  --ink-90: #161616;
  --ink-70: #3A3A3A;
  --ink-50: #707070;
  --ink-30: #B5B0A6;
  --ink-15: #E0DBCF;
  --ink-08: #ECE7DA;

  /* legacy aliases (do not use in new code · kept for old mocks) */
  --gris-90: var(--ink-90);
  --gris-70: var(--ink-70);
  --gris-50: var(--ink-50);
  --gris-30: var(--ink-30);
  --gris-15: var(--ink-15);
  --gris-08: var(--ink-08);

  /* ---------- Surface palette ---------- */
  --creme-card: #FAF7F0;                /* card on cream, ultra-subtle */
  --mimosa-soft: #FFE894;               /* tinted background for selection */
  --corail-soft: #FFD9CD;

  /* ---------- Semantic ---------- */
  --bg:        var(--creme);
  --bg-deep:   var(--creme-deep);
  --bg-surface: var(--creme-card);
  --fg:        var(--noir);
  --fg-muted:  var(--ink-70);
  --fg-faint:  var(--ink-50);
  --line:      var(--ink-15);           /* V2 hairline · default visible chrome */
  --line-soft: var(--ink-08);

  /* status · derived, sparingly used */
  --positive:  var(--corail);          /* "alertes positives" per brief */
  --warn:      var(--mimosa);
  --danger:    #C2261A;
  --info:      #2B6CDF;

  /* ---------- Type families ---------- */
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-body:    "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono:    var(--font-display); /* codex : mono retiré · aliasé sur Bricolage */

  /* ---------- Type scale (display) ---------- */
  --fs-display-1: clamp(56px, 7vw, 96px);
  --fs-display-2: clamp(40px, 5vw, 64px);
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-mono: 12px;
  --fs-mono-lg: 14px;

  --lh-tight: 0.95;
  --lh-snug: 1.15;
  --lh-body: 1.45;

  --tracking-display: -0.02em;
  --tracking-mono: 0.02em;
  --tracking-label: 0.01em;

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;       /* default for cards & inputs */
  --r-lg: 12px;       /* upper bound · never softer than this */
  --r-pill: 999px;

  /* ---------- Border ---------- */
  /* V2 doctrine: 1px solid --ink-15 by default.
     Heavier borders (2px noir) are V1 brutalist and banned for chrome.
     The composite `--line-hair` is the canonical V2 hairline. */
  --bw-1: 1px;
  --bw-2: 2px;
  --border:      var(--ink-15);              /* color token · use as `border: 1px solid var(--border)` */
  --line-hair:   1px solid var(--ink-15);    /* canonical V2 separator */
  --line-faint:  1px solid var(--ink-08);    /* even softer divider */

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---------- Shadows · V2 editorial, soft & realistic ----------
     V1 brutalist pop-shadow (`4px 4px 0 noir`) is banned. Use these tokens. */
  --shadow-card:    0 1px 2px rgba(15,15,15,0.04), 0 4px 12px rgba(15,15,15,0.04);
  --shadow-popover: 0 16px 48px rgba(15,15,15,0.16), 0 2px 6px rgba(15,15,15,0.06);
  --shadow-modal:   0 24px 64px rgba(15,15,15,0.24), 0 4px 12px rgba(15,15,15,0.08);
  --shadow-focus:   0 0 0 3px var(--mimosa);

  /* ---------- Motion ---------- */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.2, 1);
  --t-fast: 90ms;
  --t-base: 160ms;
}

/* =========================================================
   Base / semantic element styles
   ========================================================= */

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

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0;
}

.display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
}

p { margin: 0; }

.label, .mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  letter-spacing: var(--tracking-mono);
}

.metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* selection */
::selection {
  background: var(--mimosa);
  color: var(--noir);
}

/* =========================================================
   Sweep codex · corrections de largeur post-mono.
   DM Mono était plus étroit que Bricolage : on empêche le
   wrap des compteurs sidebar et le tassement du pied.
   ========================================================= */
.sb-item .count { white-space: nowrap; }
.sb-foot-name, .sb-foot-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }