/* ─────────────────────────────────────────────────────────────
   TARIQA PRO — Foundations
   Single source for color & type tokens used across the system.
   ───────────────────────────────────────────────────────────── */

/* Fonts — Google Fonts (substitutions noted in README) */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Manrope:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ─── COLOR · NOIR (warm black, surface) ─── */
  --noir-950: #0A0503;
  --noir-900: #0E0805;
  --noir-800: #170E08;
  --noir-700: #22150C;
  --noir-600: #321F12;
  --noir-500: #4A2E1A;
  --noir-400: #6B4429;
  --noir-300: #93684A;

  /* ─── COLOR · AMBRE (accent, lumière, baraka) ─── */
  --ambre-50:  #FFF6E6;
  --ambre-100: #FFE7C2;
  --ambre-200: #FFD09A;
  --ambre-300: #F8B569;
  --ambre-400: #EE9A3A;
  --ambre-500: #D97F1C;
  --ambre-600: #A85E10;
  --ambre-700: #7A410B;

  /* ─── COLOR · CRÈME (paper, respiration) ─── */
  --creme-50:  #FCF8EF;
  --creme-100: #F4ECDA;
  --creme-200: #E5D6B6;

  --blanc: #FFFFFF;

  /* ─── COLOR · SEMANTIC ─── */
  --bg:           var(--noir-900);
  --bg-elev:      var(--noir-800);
  --bg-card:      var(--noir-700);
  --bg-invert:    var(--creme-100);

  --ink:          var(--blanc);
  --ink-muted:    #C9B49B;
  --ink-dim:      #8C7556;
  --ink-invert:   var(--noir-900);

  --accent:       var(--ambre-300);   /* hero accent — single accent */
  --accent-soft:  var(--ambre-200);   /* chips, dates, CTA fill */
  --accent-deep:  var(--ambre-500);   /* hovers on dark surfaces */

  --hairline:     rgba(255, 220, 170, 0.08);
  --hairline-2:   rgba(255, 220, 170, 0.16);

  /* ─── RADII ─── */
  --r-pill:  999px;
  --r-card:  18px;
  --r-chip:  14px;
  --r-tight: 6px;

  /* ─── SPACING ─── */
  --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: 144px;

  /* ─── ELEVATION ─── */
  --shadow-card:   0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--hairline-2);
  --shadow-cta:    0 0 0 1px rgba(0,0,0,0.05), 0 12px 40px -8px rgba(238, 154, 58, 0.5);
  --shadow-hover:  0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(248,181,105,0.25);

  /* ─── MOTION ─── */
  --ease-tariqa: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 180ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;

  /* ─── TYPE FAMILIES ─── */
  /* Direction A · Slogan is CANONICAL. Cormorant Garamond is admitted only
     as a one-word accent via the `.it` class. DM Serif Display + IBM Plex
     Sans (Directions B & C) live in design-system.html §02 for reference
     only — not used in production surfaces. */
  --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --font-display-alt: "Archivo", system-ui, sans-serif;       /* H2/H3 weight 800 */
  --font-editorial: "Cormorant Garamond", Georgia, serif;     /* italic accents only */
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ─── TYPE SCALE — Direction A · Slogan (default) ─── */
  /* For Direction B (Éditorial) or C (Diwan), see design-system.html §02. */
  --type-display:     900 clamp(64px, 11vw, 180px)/0.86 var(--font-display);
  --type-h1:          900 clamp(48px, 6vw, 84px)/0.95   var(--font-display);
  --type-h2:          800 clamp(32px, 3.6vw, 56px)/1.05 var(--font-display-alt);
  --type-h3:          800 28px/1.1                       var(--font-display-alt);
  --type-h4:          900 22px/1.05                      var(--font-display);
  --type-lede:        400 19px/1.55                      var(--font-body);
  --type-body:        400 17px/1.6                       var(--font-body);
  --type-small:       400 14px/1.55                      var(--font-body);
  --type-eyebrow:     500 12px/1.4                       var(--font-mono);  /* +0.18em LS, UPPERCASE */
  --type-mono-mini:   500 11px/1.4                       var(--font-mono);  /* +0.15em LS, UPPERCASE */
  --type-italic-lede: 500 italic 24px/1.3                var(--font-editorial);

  /* Letter-spacing tokens (use as `letter-spacing: var(--ls-eyebrow)`) */
  --ls-display:  -0.035em;
  --ls-h1:       -0.025em;
  --ls-h2:       -0.015em;
  --ls-tight:    -0.01em;
  --ls-eyebrow:  0.18em;   /* mono uppercase eyebrows */
  --ls-mono:     0.15em;
  --ls-wide:     0.22em;   /* hero meta line */
}

/* ─────────────────────────────────────────────────────────────
   Semantic element defaults
   ───────────────────────────────────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--ink);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  font: var(--type-h1);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}

h2 {
  font: var(--type-h2);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h3 {
  font: var(--type-h3);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}

h4 {
  font: var(--type-h4);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}

p {
  font: var(--type-body);
  margin: 0 0 var(--s-4);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.lede,
p.lede {
  font: var(--type-lede);
  color: var(--ink-muted);
  max-width: 56ch;
}

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* The italic "Cormorant" word inside an Archivo Black title.
   Used to introduce one nuance per slogan — never more than one per block. */
.it,
em.it {
  font: 500 italic 1em/1em var(--font-editorial);
  text-transform: none;
  letter-spacing: var(--ls-tight);
  color: var(--accent-soft);
}

/* The single ambre highlight word inside a slogan (Direction A). */
.am {
  color: var(--accent);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}