/* ============================================================================
   caliceto-tokens.css
   ----------------------------------------------------------------------------
   Jetons de design pour Caliceto.
   - Tous les jetons sont préfixés --cal-*
   - Thème clair par défaut, sombre via [data-theme="dark"]
   - 3 directions visuelles : [data-direction="forge|atelier|console"]
   - Densité : [data-density="compact|regular|cozy"]
   - Rayon : [data-radius="square|4|12"]
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Surfaces & encre — base "Forge" (clair) ───────────────────────────── */
  --cal-bg:           #f4f5f3;
  --cal-bg-deep:      #ebede8;       /* fond bandeau de section */
  --cal-surface:      #ffffff;
  --cal-surface-sunk: #eef0ec;       /* zones imbriquées (code, terminal) */
  --cal-ink:          #16201b;
  --cal-ink-strong:   #0a110d;
  --cal-ink-muted:    #5c6660;
  --cal-ink-soft:     #8a8f88;
  --cal-border:       #dde0db;
  --cal-border-soft:  #e7e9e3;
  --cal-border-strong:#c5cbc3;
  --cal-overlay:      rgba(22, 32, 27, .04);

  /* ── Brand (logo) ──────────────────────────────────────────────────────── */
  --cal-brand-mark:     #1f4d3a;
  --cal-brand-wordmark: #16201b;

  /* ── Accent forest (par défaut) ────────────────────────────────────────── */
  --cal-accent:        #1f4d3a;
  --cal-accent-mid:    #2a6647;
  --cal-accent-bright: #3d8a66;
  --cal-accent-bg:     #e8f0eb;
  --cal-accent-ink:    #ffffff;        /* texte sur accent */
  --cal-accent-faint:  rgba(31, 77, 58, .12);

  /* ── Sémantique ────────────────────────────────────────────────────────── */
  --cal-success: #2a6647;
  --cal-warning: #a16207;
  --cal-danger:  #9b2c2c;
  --cal-info:    #1e4e6e;

  /* ── Couleur "open to work" (marqueur de statut) ──────────────────────── */
  --cal-status-on:  #3d8a66;
  --cal-status-off: #8a8f88;

  /* ── Typographie ───────────────────────────────────────────────────────── */
  --cal-font-sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cal-font-mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --cal-font-serif: 'Zilla Slab', 'IBM Plex Serif', 'Iowan Old Style', Georgia, serif;
  --cal-font-display: var(--cal-font-serif);

  /* Échelle modulaire (1.25, "major third") — base 16px */
  --cal-size-xs:      0.75rem;    /* 12px  — caption / marginalia */
  --cal-size-sm:      0.8125rem;  /* 13px  — eyebrow, chip, mono */
  --cal-size-base:    1rem;       /* 16px  — texte courant */
  --cal-size-md:      1.125rem;   /* 18px  — texte de lecture */
  --cal-size-lg:      1.375rem;   /* 22px  — sous-titres */
  --cal-size-xl:      1.75rem;    /* 28px  — titres section */
  --cal-size-2xl:     2.25rem;    /* 36px  — titres importants */
  --cal-size-3xl:     3rem;       /* 48px  — hero secondaire */
  --cal-size-4xl:     4rem;       /* 64px  — hero principal (mobile) */
  --cal-size-5xl:     5.25rem;    /* 84px  — hero display (desktop) */

  /* Hauteurs de ligne sémantiques */
  --cal-lh-tight: 1.05;
  --cal-lh-snug:  1.2;
  --cal-lh-base:  1.5;
  --cal-lh-loose: 1.7;

  /* Lettrage */
  --cal-track-tight:   -0.022em;
  --cal-track-display: -0.02em;   /* calee pour Zilla Slab (empattements rectangulaires) */
  --cal-track-mono:    -0.005em;
  --cal-track-eyebrow:  0.12em;

  /* Graisses */
  --cal-w-regular:  400;
  --cal-w-medium:   500;
  --cal-w-semibold: 600;
  --cal-w-bold:     700;

  /* ── Espacements (échelle 4 → 128) ─────────────────────────────────────── */
  --cal-s-0:   0;
  --cal-s-1:   4px;
  --cal-s-2:   8px;
  --cal-s-3:   12px;
  --cal-s-4:   16px;
  --cal-s-5:   24px;
  --cal-s-6:   32px;
  --cal-s-7:   48px;
  --cal-s-8:   64px;
  --cal-s-9:   96px;
  --cal-s-10:  128px;

  /* Rythme de section (varie avec [data-density]) */
  --cal-section-y:    var(--cal-s-9);
  --cal-section-y-sm: var(--cal-s-7);
  --cal-stack-y:      var(--cal-s-5);

  /* ── Géométrie ─────────────────────────────────────────────────────────── */
  --cal-radius-sm: 4px;
  --cal-radius:    4px;
  --cal-radius-lg: 12px;
  --cal-radius-pill: 999px;
  --cal-max:        1080px;
  --cal-max-prose:  680px;
  --cal-header-h:   76px;
  --cal-border-w:   1px;

  /* ── Ombres (sobres, marquées par un trait fin en haut) ────────────────── */
  --cal-shadow-xs: 0 1px 0 rgba(22, 32, 27, .03);
  --cal-shadow-sm: 0 1px 0 rgba(22, 32, 27, .04), 0 1px 2px rgba(22, 32, 27, .05);
  --cal-shadow-md: 0 1px 0 rgba(22, 32, 27, .05), 0 6px 18px -10px rgba(22, 32, 27, .18);
  --cal-shadow-lg: 0 1px 0 rgba(22, 32, 27, .05), 0 18px 40px -20px rgba(22, 32, 27, .22);
  --cal-shadow-focus: 0 0 0 2px var(--cal-bg), 0 0 0 4px var(--cal-accent);

  /* ── Mouvement ─────────────────────────────────────────────────────────── */
  --cal-ease:    cubic-bezier(.2, .7, .2, 1);
  --cal-ease-in: cubic-bezier(.7, .0, .8, .3);
  --cal-dur-1:   120ms;
  --cal-dur-2:   180ms;
  --cal-dur-3:   280ms;

  /* ── Composables ───────────────────────────────────────────────────────── */
  --cal-rule: 1px solid var(--cal-border);
  --cal-rule-soft: 1px solid var(--cal-border-soft);
  --cal-rule-strong: 1px solid var(--cal-border-strong);

  /* Densité — multiplicateur appliqué aux gaps de composant */
  --cal-density: 1;
}

/* ============================================================================
   THÈME SOMBRE
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --cal-brand-mark:     #7bc6a0;
  --cal-brand-wordmark: #f4f7f1;

  --cal-bg:           #0e1411;
  --cal-bg-deep:      #0a0f0c;
  --cal-surface:      #141b17;
  --cal-surface-sunk: #0c1310;
  --cal-ink:          #e6ebe5;
  --cal-ink-strong:   #f4f7f1;
  --cal-ink-muted:    #9aa49c;
  --cal-ink-soft:     #6e766e;
  --cal-border:       #25302a;
  --cal-border-soft:  #1c2620;
  --cal-border-strong:#384540;
  --cal-overlay:      rgba(255, 255, 255, .04);

  --cal-accent:        #5fb088;
  --cal-accent-mid:    #4a9a73;
  --cal-accent-bright: #7bc6a0;
  --cal-accent-bg:     #14241c;
  --cal-accent-ink:    #0a110d;
  --cal-accent-faint:  rgba(95, 176, 136, .14);

  --cal-status-on:  #7bc6a0;
  --cal-status-off: #6e766e;

  --cal-shadow-xs: 0 1px 0 rgba(0, 0, 0, .2);
  --cal-shadow-sm: 0 1px 0 rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .25);
  --cal-shadow-md: 0 1px 0 rgba(0, 0, 0, .3), 0 6px 18px -10px rgba(0, 0, 0, .6);
  --cal-shadow-lg: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 40px -20px rgba(0, 0, 0, .7);
  --cal-shadow-focus: 0 0 0 2px var(--cal-bg), 0 0 0 4px var(--cal-accent);
}

/* ============================================================================
   DIRECTIONS VISUELLES
   Chaque direction est une variation d'humeur cohérente sur les mêmes jetons.
   ========================================================================== */

/* ── Direction "Forge" — éditorial sobre, vert rare et chirurgical ───────── */
/* (défaut — rien à overrider) */

/* ── Direction "Atelier" — papier chaud, serif expressif, plus d'air ────── */
[data-direction="atelier"] {
  --cal-bg:           #f6f3ec;
  --cal-bg-deep:      #ede8dc;
  --cal-surface:      #fbfaf5;
  --cal-surface-sunk: #efeae0;
  --cal-ink:          #1a1d18;
  --cal-ink-muted:    #5a5e54;
  --cal-ink-soft:     #8d8f82;
  --cal-border:       #e2dccd;
  --cal-border-soft:  #ece7d8;
  --cal-border-strong:#cbc4b1;

  --cal-accent:        #234c33;
  --cal-accent-mid:    #305d3e;
  --cal-accent-bright: #4d8867;
  --cal-accent-bg:     #e3ead6;
  --cal-accent-faint:  rgba(35, 76, 51, .12);

  --cal-section-y:    var(--cal-s-10);
}
[data-direction="atelier"][data-theme="dark"] {
  --cal-bg:           #15140f;
  --cal-bg-deep:      #100f0b;
  --cal-surface:      #1d1b14;
  --cal-surface-sunk: #15130e;
  --cal-ink:          #ece7d8;
  --cal-ink-muted:    #a39d8c;
  --cal-ink-soft:     #76705e;
  --cal-border:       #2c2a22;
  --cal-border-soft:  #1f1d17;
  --cal-border-strong:#3e3a2e;
  --cal-accent:        #8db094;
  --cal-accent-bright: #a9c8af;
  --cal-accent-bg:     #1d2820;
}

/* ── Direction "Console" — vert présent, aplats, posture confiante ──────── */
[data-direction="console"] {
  --cal-bg:           #f1f4f0;
  --cal-bg-deep:      #1f4d3a;            /* hero / bandeaux en aplat vert */
  --cal-surface:      #ffffff;
  --cal-surface-sunk: #e9eee8;
  --cal-ink:          #0e1614;
  --cal-ink-muted:    #4f5953;
  --cal-border:       #d3d8d1;
  --cal-border-strong:#b6beb4;

  --cal-accent:        #173d2c;
  --cal-accent-mid:    #1f4d3a;
  --cal-accent-bright: #3d8a66;
  --cal-accent-bg:     #d8e4dc;

  --cal-section-y:    var(--cal-s-9);
}
[data-direction="console"][data-theme="dark"] {
  --cal-bg:           #0a120e;
  --cal-bg-deep:      #050a07;
  --cal-surface:      #0f1813;
  --cal-surface-sunk: #0a120e;
  --cal-ink:          #eaf0eb;
  --cal-ink-muted:    #95a299;
  --cal-border:       #1b2620;
  --cal-border-strong:#324138;
  --cal-accent:        #7bc6a0;
  --cal-accent-mid:    #5fb088;
  --cal-accent-bright: #a9e0c0;
  --cal-accent-bg:     #142219;
}

/* ============================================================================
   PALETTES D'ACCENT ALTERNATIVES (data-accent="*")
   forest (défaut) | clay | indigo | graphite | rust
   ========================================================================== */
[data-accent="clay"] {
  --cal-accent:        #a14a2a;
  --cal-accent-mid:    #b35a39;
  --cal-accent-bright: #d18062;
  --cal-accent-bg:     #f3e3da;
  --cal-accent-faint:  rgba(161, 74, 42, .12);
  --cal-status-on:     #d18062;
}
[data-accent="indigo"] {
  --cal-accent:        #2f3e8c;
  --cal-accent-mid:    #3d4fa5;
  --cal-accent-bright: #6a7bd1;
  --cal-accent-bg:     #e3e6f4;
  --cal-accent-faint:  rgba(47, 62, 140, .12);
  --cal-status-on:     #6a7bd1;
}
[data-accent="graphite"] {
  --cal-accent:        #2b302e;
  --cal-accent-mid:    #3d4341;
  --cal-accent-bright: #6b7470;
  --cal-accent-bg:     #e6e8e6;
  --cal-accent-faint:  rgba(43, 48, 46, .12);
  --cal-status-on:     #6b7470;
}
[data-accent="rust"] {
  --cal-accent:        #8e3a1c;
  --cal-accent-mid:    #a44a27;
  --cal-accent-bright: #c97041;
  --cal-accent-bg:     #f1ddd0;
  --cal-accent-faint:  rgba(142, 58, 28, .12);
  --cal-status-on:     #c97041;
}

/* En sombre, on garde l'accent vif équivalent */
[data-theme="dark"][data-accent="clay"]    { --cal-accent:#d18062; --cal-accent-bright:#e5a489; --cal-accent-bg:#2a1812; }
[data-theme="dark"][data-accent="indigo"]  { --cal-accent:#8a9be0; --cal-accent-bright:#a8b6e8; --cal-accent-bg:#171a2c; }
[data-theme="dark"][data-accent="graphite"]{ --cal-accent:#aab1ad; --cal-accent-bright:#c7ccc9; --cal-accent-bg:#1c1f1d; }
[data-theme="dark"][data-accent="rust"]    { --cal-accent:#d68658; --cal-accent-bright:#e6a47e; --cal-accent-bg:#2a1612; }

/* ============================================================================
   DENSITÉ
   ========================================================================== */
[data-density="compact"] {
  --cal-density:      0.82;
  --cal-section-y:    var(--cal-s-7);
  --cal-section-y-sm: var(--cal-s-6);
  --cal-stack-y:      var(--cal-s-4);
}
[data-density="cozy"] {
  --cal-density:      1.18;
  --cal-section-y:    var(--cal-s-10);
  --cal-section-y-sm: var(--cal-s-8);
  --cal-stack-y:      var(--cal-s-6);
}

/* ============================================================================
   RAYONS
   ========================================================================== */
[data-radius="square"] { --cal-radius: 0px; --cal-radius-lg: 0px; --cal-radius-sm: 0px; }
[data-radius="4"]      { --cal-radius: 4px; --cal-radius-lg: 8px; --cal-radius-sm: 2px; }
[data-radius="12"]     { --cal-radius: 8px; --cal-radius-lg: 16px; --cal-radius-sm: 4px; }

/* ============================================================================
   RESET / BASE GLOBAL
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  margin: 0;
  background: var(--cal-bg);
  color: var(--cal-ink);
  font-family: var(--cal-font-sans);
  font-size: var(--cal-size-base);
  line-height: var(--cal-lh-base);
  font-feature-settings: "ss01", "ss02", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--cal-dur-3) var(--cal-ease),
              color var(--cal-dur-3) var(--cal-ease);
}
::selection { background: var(--cal-accent); color: var(--cal-accent-ink); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* Focus visible global */
:focus-visible {
  outline: 2px solid var(--cal-accent);
  outline-offset: 2px;
  border-radius: 2px;
}