/* =========================================================================
   RADWA'S — DESIGN TOKENS  (dark editorial system)
   -------------------------------------------------------------------------
   No cream anywhere. The site is built on a deep, warm near-black with an
   OXBLOOD field that finally lets the burgundy logo belong, a bright bone
   off-white for text, and a single warm EMBER accent from the cuisine.
   High contrast, editorial, photography-forward — the language of Death & Co,
   Noma and Atomix rather than the warm-beige "premium" default.

   The old light-theme variable names are re-pointed to dark-appropriate
   values below, so every component inherits the new look. --paper is now the
   base (dark); --ink is now the text (light). "Light island" sections invert
   back to bone via the .section-invert helper.
   ========================================================================= */

:root {
  /* ---- Core surfaces (dark) ---- */
  --void: #0e0b0d;         /* deepest — footer, overlays */
  --base: #171215;         /* the main page background — warm near-black */
  --raise: #211a20;        /* lifted panels, cards, inputs */
  --raise-2: #2b232a;      /* hover / higher panels */
  --oxblood: #3a1420;      /* brand field — deep oxblood, ties to the logo */
  --oxblood-2: #4d1a2a;

  /* ---- Text (light on dark) ---- */
  --bone: #f4ede2;         /* primary text — warm bone white */
  --bone-dim: #d8cfc4;
  --muted: #a99f96;        /* secondary text, ~6.6:1 on --base */
  --faint: #7c7169;        /* tertiary / captions */

  /* ---- Brand + accent ---- */
  --burgundy: #8f2942;     /* brand, slightly lifted so it reads on dark */
  --burgundy-bright: #b03a54;
  --ember: var(--accent-base, #e2743b);      /* warm ember accent (chilli-oil orange) */
  --ember-soft: #efac6a;                       /* lighter ember for large text on dark */
  --ember-tint: color-mix(in srgb, var(--ember) 18%, transparent);
  --gold: #d8a24a;          /* used very sparingly, e.g. small marks */

  /* ---- Lines / edges (light-on-dark) ---- */
  --line: rgba(244, 237, 226, 0.12);
  --line-strong: rgba(244, 237, 226, 0.22);
  --hairline: 1px solid var(--line);

  /* Semantic aliases so existing components keep working on the dark base. */
  --paper: var(--base);
  --paper-raised: var(--raise);
  --sand: var(--raise);
  --sand-deep: var(--raise-2);
  --ink: var(--bone);              /* "ink" (text) is now light */
  --ink-soft: var(--bone-dim);
  --white: var(--bone);
  --accent: var(--ember);
  --accent-strong: var(--ember);   /* on dark, the full ember is legible */
  --accent-tint: var(--ember-tint);
  --burgundy-deep: var(--oxblood);
  --burgundy-ink: var(--oxblood);
  --cream: var(--raise);
  --cream-deep: var(--raise-2);
  --charcoal: var(--bone);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --brass: var(--ember);
  --brass-ink: var(--ember-soft);
  --chilli: #d4482c;

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --text-xs: 0.76rem;
  --text-sm: 0.9rem;
  --text-base: 1.02rem;
  --text-lg: 1.12rem;
  --text-xl: clamp(1.18rem, 1.04rem + 0.6vw, 1.5rem);
  --h4: clamp(1.12rem, 1.02rem + 0.4vw, 1.32rem);
  --h3: clamp(1.35rem, 1.12rem + 0.8vw, 1.75rem);
  --h2: clamp(2rem, 1.45rem + 2.4vw, 3.4rem);
  --h1: clamp(2.7rem, 1.8rem + 4vw, 5.2rem);
  --display: clamp(3.2rem, 1.9rem + 6.2vw, 8rem);

  --leading-tight: 0.98;
  --leading-heading: 1.08;
  --leading-body: 1.62;
  --tracking-tight: -0.03em;
  --tracking-tighter: -0.045em;
  --tracking-label: 0.22em;

  /* ---- Layout ---- */
  --shell: 1240px;
  --shell-narrow: 760px;
  --shell-wide: 1400px;
  --gutter: clamp(20px, 5vw, 60px);
  --header-height: 82px;
  --header-height-mobile: 62px;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;
  --section-y: clamp(72px, 9vw, 148px);

  /* ---- Detail ---- */
  --radius: 2px;
  --radius-photo: 3px;
  --radius-lg: 4px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 50px -34px rgba(0,0,0,0.9);
  --shadow-raised: 0 40px 90px -46px rgba(0,0,0,0.95);
  --shadow-float: 0 60px 120px -50px rgba(0,0,0,1);
  --focus: 2px solid var(--ember);
  --focus-offset: 3px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 300ms;
  --duration-slow: 720ms;

  color-scheme: dark;
}