/* Two Minds - the only file allowed to contain colour literals (enforced by tools/gate-tokens.mjs). */
:root {
  /* colour */
  --ink: #0E0F12;
  --ink-deep: #0A0B0D;
  --graphite: #17191E;
  --graphite-2: #1C1F25;
  --steel: #8B93A1;
  --bone: #F2F0EC;
  --ember: #FF5A1F;
  --white: #FFFFFF;

  --bone-80: rgba(242, 240, 236, 0.80);
  --bone-72: rgba(242, 240, 236, 0.72);
  --bone-25: rgba(242, 240, 236, 0.25);
  --bone-18: rgba(242, 240, 236, 0.18);
  --bone-14: rgba(242, 240, 236, 0.14);
  --bone-10: rgba(242, 240, 236, 0.10);
  --bone-08: rgba(242, 240, 236, 0.08);
  --bone-06: rgba(242, 240, 236, 0.06);

  --ember-hi: #FFC2A6;
  --white-90: rgba(255, 255, 255, 0.90);
  --white-35: rgba(255, 255, 255, 0.35);
  --bone-04: rgba(242, 240, 236, 0.04);
  --ink-72: rgba(14, 15, 18, 0.72);
  --ember-70: rgba(255, 90, 31, 0.70);
  --ember-50: rgba(255, 90, 31, 0.50);
  --ember-40: rgba(255, 90, 31, 0.40);
  --ember-35: rgba(255, 90, 31, 0.35);
  --ember-22: rgba(255, 90, 31, 0.22);
  --ember-16: rgba(255, 90, 31, 0.16);
  --ember-12: rgba(255, 90, 31, 0.12);
  --ember-04: rgba(255, 90, 31, 0.04);
  --steel-10: rgba(139, 147, 161, 0.10);
  --ink-92: rgba(14, 15, 18, 0.92);
  --ink-00: rgba(14, 15, 18, 0);
  --shadow-deep: rgba(0, 0, 0, 0.55);
  --logo-filter: brightness(0) invert(1); /* one-colour client logos: white on dark */

  /* Roles the light theme splits apart (in dark they equal the tokens above): ember as a FILL
     (buttons, dots, rails, bars) stays the vivid brand orange with ink on it, while --ember itself
     is the text-safe tone; --ember-display is ember for large display type (3:1). */
  --ember-fill: #FF5A1F;
  --on-ember: #0E0F12;
  --ember-display: #FF5A1F;
  --shadow-soft: rgba(0, 0, 0, 0.30);
  --rim: rgba(255, 255, 255, 0.06); /* the lit top edge of a raised surface */
  --glass: rgba(14, 15, 18, 0.72);
  --glass-92: rgba(14, 15, 18, 0.92);
  --glow-peach: rgba(255, 90, 31, 0.22);
  /* contact console: the amber "draft" status light, and the WhatsApp bubble, which stays dark in both themes */
  --signal-draft: #E8B04A;
  --bubble-top: #3A2217;
  --bubble-bottom: #2C1A12;

  /* Night: the dark palette under its own names, so the light theme can set "ink islands"
     (a dark band or panel inside the light page) by pointing the normal tokens here (light.css). */
  --night-ink: #0E0F12;
  --night-graphite: #17191E;
  --night-graphite-2: #1C1F25;
  --night-steel: #8B93A1;
  --night-bone: #F2F0EC;
  --night-ember: #FF5A1F;
  --night-ember-hi: #FFC2A6;
  --night-bone-80: rgba(242, 240, 236, 0.80);
  --night-bone-72: rgba(242, 240, 236, 0.72);
  --night-bone-25: rgba(242, 240, 236, 0.25);
  --night-bone-18: rgba(242, 240, 236, 0.18);
  --night-bone-14: rgba(242, 240, 236, 0.14);
  --night-bone-10: rgba(242, 240, 236, 0.10);
  --night-bone-08: rgba(242, 240, 236, 0.08);
  --night-bone-06: rgba(242, 240, 236, 0.06);
  --night-bone-04: rgba(242, 240, 236, 0.04);
  --night-ink-92: rgba(14, 15, 18, 0.92);
  --night-ink-72: rgba(14, 15, 18, 0.72);
  --night-ink-00: rgba(14, 15, 18, 0);

  /* client brand colours (from each live site, docs/content/02-projects.md). Decoration only:
     glows, rails, frame edges. Never text, so they stay out of the contrast pairs. */
  --brand-reefna: #156856;
  --brand-najah: #1F8A3E;
  --brand-akma: #3882C3;
  --brand-sellsza: #E92E29;
  --brand-ntflow: #F27520;

  /* glow */
  --glow-rest: 0 0 50px var(--ember-16);
  --glow-cta: 0 0 0 1px var(--ember-70), 0 10px 40px var(--ember-35);
  --glow-text: 0 0 36px var(--ember-35);

  /* type */
  --font-display: 'Anybody', 'Noto Kufi Arabic', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Noto Kufi Arabic', system-ui, sans-serif;
  --font-ar: 'Noto Kufi Arabic', system-ui, sans-serif; /* geometric kufi: same family feel as Anybody (chosen 2026-09-29) */
  --font-mono: 'Martian Mono', ui-monospace, monospace;

  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1rem, 1.1vw, 1.0625rem);
  --fs-h3: clamp(1.25rem, 2vw, 2rem);
  --fs-h2: clamp(2.25rem, 4.4vw, 4.25rem);

  /* shape */
  --r-btn: 999px; /* pill: every button matches the nav capsule (review 2026-09-29) */
  --r-card: 20px;
  --r-chip: 12px;
  --r-pill: 999px; /* nav capsule, nav links, prefs, avatar, badges */

  /* layout */
  --gutter: clamp(20px, 3.9vw, 56px);
  --max: 1440px;
  /* The empty side margin next to the content, and where a 48px floating button sits centred in it,
     so the corner buttons stay off the text and photos (review 2026-09-30). */
  --side: calc(var(--gutter) + max(0px, (100vw - var(--max)) / 2));
  --float-edge: max(8px, calc((var(--side) - 48px) / 2));
  --strip-h: 124px; /* numbers strip + its bottom space: the hero leaves room so the strip sits in the first screen */
  --nav-h: 88px; /* space the floating capsule occupies: 14px offset + 62px capsule + breathing room */

  /* motion */
  --ease-out: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-ui: cubic-bezier(0.22, 0.8, 0.2, 1);
}

/* Light theme (decision 2026-09-29: dark stays the default brand look; the visitor may switch).
   Same token NAMES, so every component flips without per-component overrides:
   --ink = page background, --bone = main text.
   Redesign 2026-09-30 ("the light version is dead"): warm bright paper with near-white raised surfaces
   and warm shadows; ember as a fill stays the vivid brand orange (--ember-fill, ink on it, like dark),
   --ember is only the text-safe tone; glows turn into peach light. The depth rules live in light.css. */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #F8F4ED;        /* warm paper */
  --ink-deep: #F0E8DC;   /* loader and sunken wells */
  --graphite: #FFFEFB;   /* raised surfaces: near-white on the paper */
  --graphite-2: #FFF7EE; /* the warm, lit top of a raised surface */
  --steel: #5A606C;
  --bone: #16171B;
  --ember: #BA3505;      /* text-safe ember: AA on paper, white and the peach tints */
  --ember-hi: #FFA070;
  --ember-display: #E0470E; /* large display words only (>= 3:1), so MARKETING. still glows orange */

  --bone-80: rgba(22, 23, 27, 0.80);
  --bone-72: rgba(22, 23, 27, 0.74);
  --bone-25: rgba(22, 23, 27, 0.25);
  --bone-18: rgba(22, 23, 27, 0.16);
  --bone-14: rgba(22, 23, 27, 0.12);
  --bone-10: rgba(22, 23, 27, 0.09);
  --bone-08: rgba(22, 23, 27, 0.075);
  --bone-06: rgba(22, 23, 27, 0.05);
  --bone-04: rgba(22, 23, 27, 0.035);

  /* borders and rings: the vivid orange, so edges read as ember and not as brick */
  --ember-70: rgba(240, 80, 22, 0.78);
  --ember-50: rgba(240, 80, 22, 0.58);
  --ember-40: rgba(240, 80, 22, 0.44);
  --ember-35: rgba(255, 96, 36, 0.34);
  /* glows: warm peach light instead of an orange haze */
  --ember-22: rgba(255, 128, 64, 0.26);
  --ember-16: rgba(255, 128, 64, 0.16);
  --ember-12: rgba(255, 96, 36, 0.10);
  --ember-04: rgba(255, 96, 36, 0.05);
  --steel-10: rgba(255, 196, 150, 0.22); /* the cool corner glow becomes a warm sunrise on paper */
  --ink-92: rgba(248, 244, 237, 0.92);
  --ink-72: rgba(248, 244, 237, 0.80);
  --ink-00: rgba(248, 244, 237, 0);
  --shadow-deep: rgba(96, 52, 20, 0.16); /* warm brown, never grey: shadows on paper are warm */
  --logo-filter: brightness(0); /* one-colour client logos: black on light */

  --shadow-soft: rgba(96, 52, 20, 0.07);
  --rim: rgba(255, 255, 255, 0.95);
  --glass: rgba(255, 253, 249, 0.74);
  --glass-92: rgba(255, 253, 249, 0.94);
  --glow-peach: rgba(255, 140, 80, 0.34);
}

/* Registered so the Selected Work section can fade from one client colour to the next. */
@property --brand {
  syntax: '<color>';
  inherits: true;
  initial-value: #156856;
}