/* Sirocco Design Tokens — CSS Custom Properties
 * Auto-mappable from tokens.json. Import in your :root.
 *
 *   @import "./tokens.css";
 *   :root { ... }
 *
 * Conventions:
 *  --sir-*         brand palette (raw)
 *  --sir-bg-*      semantic background
 *  --sir-text-*    semantic text
 *  --sir-action-*  semantic action
 *  --sir-status-*  semantic status
 */

:root {
  /* ── Color · Brand ──────────────────────────────── */
  --sir-stone:        #ECE4D2;
  --sir-cloud:        #F8F4EA;
  --sir-ink:          #1A1D24;
  --sir-ink-2:        #2B313D;
  --sir-mute:         #6B6558;
  --sir-aegean:       #1E5B7A;
  --sir-aegean-dark:  #0F3B52;
  --sir-coral:        #E8794A;
  --sir-olive:        #8A9A7B;
  --sir-gold:         #C9A558;

  /* ── Color · Ink variants ───────────────────────── */
  /* Les accents ci-dessus sont des couleurs de REMPLISSAGE : en texte ils
     tombent à 2,3–2,6:1 sur fond clair. Ces variantes sont calibrées contre
     le fond clair le PLUS SOMBRE en usage (olive .14 sur stone, rgb 222,218,198),
     donc ≥4,5:1 sur les treize fonds clairs du système.
     Ne PAS les utiliser sur ink — elles y tombent à 2,65:1. Sur fond sombre,
     ce sont les accents bruts qui passent (coral 5,83 · olive 5,61 · gold 7,23). */
  --sir-coral-ink:    #A43F15;   /* 5,79:1 cloud · 5,03 stone · 4,53 pire fond clair */
  --sir-olive-ink:    #57634C;   /* 5,80:1 cloud · 5,04 stone · 4,54 pire fond clair */
  --sir-gold-ink:     #755C26;   /* 5,77:1 cloud · 5,01 stone · 4,51 pire fond clair */

  /* ── Color · Lines ──────────────────────────────── */
  --sir-line:           rgba(26, 29, 36, 0.12);
  --sir-line-strong:    rgba(26, 29, 36, 0.20);
  --sir-line-on-dark:   rgba(248, 244, 234, 0.16);

  /* ── Color · Semantic ───────────────────────────── */
  --sir-bg-default:    var(--sir-stone);
  --sir-bg-elevated:   var(--sir-cloud);
  --sir-bg-inverse:    var(--sir-ink);

  --sir-text-primary:   var(--sir-ink);
  --sir-text-secondary: var(--sir-ink-2);
  --sir-text-muted:     var(--sir-mute);
  --sir-text-on-dark:   var(--sir-cloud);

  --sir-action-primary:         var(--sir-aegean);
  --sir-action-primary-pressed: var(--sir-aegean-dark);
  --sir-action-accent:          var(--sir-coral);
  --sir-text-accent:            var(--sir-coral-ink);

  --sir-status-success: var(--sir-olive);
  --sir-status-warning: var(--sir-coral);
  --sir-status-premium: var(--sir-gold);

  /* ── Typography ─────────────────────────────────── */
  --sir-font-serif:  "Fraunces", Georgia, serif;
  --sir-font-sans:   "Inter Tight", -apple-system, system-ui, sans-serif;
  --sir-font-mono:   "JetBrains Mono", ui-monospace, monospace;

  --sir-weight-light:    300;
  --sir-weight-regular:  400;
  --sir-weight-medium:   500;
  --sir-weight-semibold: 600;

  --sir-fraunces-vars: "SOFT" 100, "opsz" 144;

  /* Type scale (px) */
  --sir-size-display-1: 96px;
  --sir-size-display-2: 72px;
  --sir-size-display-3: 60px;
  --sir-size-h1:        32px;
  --sir-size-h2:        24px;
  --sir-size-h3:        20px;
  --sir-size-body:      15px;
  --sir-size-body-sm:   13px;
  --sir-size-caption:   12px;
  --sir-size-micro:     11px;

  /* Letter-spacing presets for Fraunces display */
  --sir-tracking-display: -0.03em;
  --sir-tracking-h1:      -0.02em;
  --sir-tracking-mono:     0.15em;

  /* ── Spacing scale (4px base) ───────────────────── */
  --sir-space-0:  0;
  --sir-space-1:  4px;
  --sir-space-2:  8px;
  --sir-space-3:  12px;
  --sir-space-4:  16px;
  --sir-space-5:  20px;
  --sir-space-6:  24px;
  --sir-space-8:  32px;
  --sir-space-10: 40px;
  --sir-space-12: 48px;
  --sir-space-16: 64px;
  --sir-space-20: 80px;
  --sir-space-24: 96px;

  /* ── Radius ─────────────────────────────────────── */
  --sir-radius-sm:   6px;
  --sir-radius-md:  10px;
  --sir-radius-lg:  14px;
  --sir-radius-xl:  20px;
  --sir-radius-2xl: 28px;
  --sir-radius-pill: 999px;

  /* ── Shadow ─────────────────────────────────────── */
  --sir-shadow-card:  0 1px 2px rgba(26, 29, 36, 0.06);
  --sir-shadow-lift:  0 8px 24px rgba(26, 29, 36, 0.08);
  --sir-shadow-sheet: 0 -4px 32px rgba(26, 29, 36, 0.18);

  /* ── Motion ─────────────────────────────────────── */
  --sir-duration-fast: 120ms;
  --sir-duration-base: 200ms;
  --sir-duration-slow: 320ms;

  --sir-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sir-ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --sir-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Device ─────────────────────────────────────── */
  --sir-device-iphone-width:        390px;
  --sir-device-iphone-height:       844px;
  --sir-device-status-bar:          47px;
  --sir-device-home-indicator:      34px;
  --sir-min-tap-target:             44px;
}

/* ── Utility helpers ────────────────────────────── */
.sir-display {
  font-family: var(--sir-font-serif);
  font-weight: var(--sir-weight-light);
  font-variation-settings: var(--sir-fraunces-vars);
  letter-spacing: var(--sir-tracking-display);
  line-height: 1.02;
}
.sir-eyebrow {
  font-family: var(--sir-font-mono);
  font-size: var(--sir-size-micro);
  letter-spacing: var(--sir-tracking-mono);
  text-transform: uppercase;
  color: var(--sir-text-muted);
}
.sir-body {
  font-family: var(--sir-font-sans);
  font-size: var(--sir-size-body);
  line-height: 1.5;
  color: var(--sir-text-secondary);
}