/* ============================================================
   ILÉ — the house design system (graphics)
   Tokens of record. Import this file; never retype raw hex in
   a plate. Accent is a per-brand MAPPING into the ACCENT role
   (Maheta maps its orange; the warm neutral spine below is the
   house signature and does not change).
   Source: design-system boards 2026-10-24. v1.
   ============================================================ */

:root {
  /* --- the neutral spine (house signature, do not change) --- */
  --bg: #fbf4ed;            /* CHROME — warm cream, the house default surface */
  --bg-elevated: #ffffff;   /* PLATE — a white surface sitting on chrome */
  --ink: #1d1410;           /* INK — text, hairlines at full strength */
  --ink-muted: #6d5c50;     /* INK-QUIET — secondary copy, labels */
  --border: #f0e2d4;        /* HAIRLINE — rules, frames, dividers */
  --panel: #221710;         /* PANEL — the dark stage (posters, covers) */
  --panel-2: #31221a;       /* PANEL-RAISED — one step up on the dark stage */
  --peach: #ffb18c;         /* GLOW-WARM — accent's quiet partner on dark */

  /* --- ACCENT role (Maheta mapping shown; swap per brand) --- */
  --accent: #ff5a1f;
  --accent-strong: #e8430c;
  --accent-deep: #b93407;
  --accent-soft: #ffefe6;
  --accent-border: #ffc9ab;

  /* --- semantics: reserved, never repurposed, never brand --- */
  --ok: #116b45;            /* success only. green is NEVER a brand colour */
  --warn: #b45309;
  --bad: #d92d20;

  /* --- depth --- */
  --shadow-card: 0 1px 2px 0 rgb(64 34 16 / 0.05), 0 20px 44px -18px rgb(64 34 16 / 0.14);
  --shadow-raised: 0 2px 4px 0 rgb(64 34 16 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.6), 0 28px 56px -20px rgb(64 34 16 / 0.2);
  --shadow-glow: 0 2px 4px 0 rgb(34 14 4 / 0.2), 0 32px 64px -16px rgb(255 90 31 / 0.35);

  /* --- the stage (accent's full-bleed moment, used sparingly) --- */
  --stage: radial-gradient(120% 90% at 18% 8%, #ff9558 0%, #ff5a1f 46%, #e8430c 78%, #c93805 100%);

  /* --- type roles (families per brand; Maheta maps shown) --- */
  --font-display: 'Sora', sans-serif;  /* the VOICE. 800 weight, -0.035em, 0.98 leading */
  --font-body: 'Inter', sans-serif;    /* the WORKHORSE. never the identity */
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace; /* the SIGNATURE eyebrow */

  /* --- display ladder @1080 canvas (px) --- */
  --size-eyebrow: 24px;
  --size-body: 32px;
  --size-title: 44px;
  --size-sub: 72px;
  --size-hero: 120px;
  --size-poster: 210px;

  /* --- layout --- */
  --margin-min: 72px;       /* minimum margin on any 1080 canvas */
}

/* ---------- shared recipes ---------- */

/* grain — the house finish. on EVERY plate, always */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' /></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  mix-blend-mode: overlay;
}

/* the signature eyebrow: mono, tracked, uppercase, small */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* the voice */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ghost echo — an owned motif, one per composition at most */
.ghost {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgb(255 255 255 / 0.05);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
}

/* single warm bloom — the ONLY glow the house allows */
.bloom {
  position: absolute;
  border-radius: 50%;
  background: #ffe0cc;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
}

/* hairline rule — structure without boxes */
.rule { height: 2px; background: var(--border); border: 0; }