/* ═══════════════════════════════════════════════════════════════
   GRIMORIA — Design Tokens (public surface)
   Source: /design-system/colors_and_type.css v4.2
   Loaded on grimoria.it — do not edit directly, sync from source.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette ─────────────────────────────────────────── */
  --obsidian:        #0E0E10;
  --midnight:        #111111;
  --espresso:        #2A1F18;
  --charcoal:        #3A3530;
  --stone:           #7A7670;

  --pearl:           #EDEAE4;
  --pearl-deep:      #E0DDD7;
  --pearl-pure:      #F3F4F6;

  /* ── Accents ──────────────────────────────────────────────── */
  --gold:            #B8924A;
  --gold-dim:        rgba(184, 146, 74, 0.12);
  --gold-ghost:      rgba(184, 146, 74, 0.05);
  --gold-soft:       rgba(184, 146, 74, 0.25);

  --emerald:         #009E74;
  --emerald-dim:     rgba(0, 158, 116, 0.10);
  --emerald-ghost:   rgba(0, 158, 116, 0.05);
  --emerald-soft:    rgba(0, 158, 116, 0.25);

  /* ── Semantic ─────────────────────────────────────────────── */
  --bg-primary:      var(--obsidian);      /* site is dark-first */
  --bg-secondary:    var(--pearl);
  --bg-tertiary:     var(--pearl-deep);
  --fg-primary:      var(--pearl);
  --fg-secondary:    var(--stone);
  --fg-on-pearl:     var(--obsidian);
  --accent:          var(--gold);
  --accent-tech:     var(--emerald);

  /* ── Borders ──────────────────────────────────────────────── */
  --border:              rgba(58, 53, 48, 0.12);
  --border-strong:       rgba(58, 53, 48, 0.30);
  --border-inverse:      rgba(237, 234, 228, 0.08);
  --border-inverse-strong: rgba(237, 234, 228, 0.15);
  --border-gold:         rgba(184, 146, 74, 0.25);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:    'Playfair Display', 'Times New Roman', serif;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700;

  --fs-hero-xl:      clamp(3.5rem, 9vw, 8.5rem);   /* hero cinematic */
  --fs-hero:         clamp(3rem, 6vw, 5.5rem);     /* current hero */
  --fs-display-1:    clamp(48px, 5vw, 80px);
  --fs-display-2:    clamp(36px, 4vw, 60px);
  --fs-h1:           clamp(32px, 3.2vw, 48px);
  --fs-h2:           clamp(24px, 2.2vw, 32px);
  --fs-h3:           clamp(18px, 1.6vw, 22px);
  --fs-body-lg:      17px;
  --fs-body:         15px;
  --fs-body-sm:      13px;
  --fs-caption:      11px;
  --fs-label:        10px;

  --lh-tight:        0.95;
  --lh-display:      1.1;
  --lh-title:        1.2;
  --lh-body:         1.7;
  --lh-body-loose:   1.85;

  --ls-display:      -0.03em;
  --ls-title:        -0.02em;
  --ls-label:        0.22em;
  --ls-label-wide:   0.30em;

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;
  --space-4:  16px;  --space-5:  20px;  --space-6:  24px;
  --space-8:  32px;  --space-10: 40px;  --space-12: 48px;
  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;
  --space-32: 128px; --space-40: 160px;

  /* ── Radii (architectural — sharp by default) ────────────── */
  --radius-none: 0;     --radius-xs: 2px;    --radius-sm: 4px;
  --radius-md:   8px;   --radius-lg: 12px;   --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-whisper: 0 1px 2px rgba(14, 14, 16, 0.04);
  --shadow-rest:    0 4px 16px rgba(14, 14, 16, 0.06);
  --shadow-raised:  0 12px 32px rgba(14, 14, 16, 0.12);
  --shadow-deep:    0 24px 64px rgba(14, 14, 16, 0.24);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-std:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-calm:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-cinematic: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:       150ms;
  --dur-base:       300ms;
  --dur-slow:       500ms;
  --dur-cinematic:  800ms;
}