/* ============================================================================
   QENTRA TECH — design tokens.

   This is NOT the office palette. qentra.quriou.com is the strategic office and
   reads ivory/bronze/serif; the product estate is its own thing — warm ink,
   two accents at equal weight, one signal colour, and three typefaces that each
   carry one of the three claims: art, technology, human.

   Rule that must not be broken: LIME IS THE SIGNAL COLOUR. It means "this is
   live, a real machine answered". It is never used decoratively.
   ========================================================================= */

:root {
  /* --- Ground: warm near-black, never pure #000 ---------------------------- */
  --ink:    #1b1713;
  --ink-2:  #241f1a;
  --ink-3:  #2e2822;
  --ink-4:  #3a3229;

  /* --- Text ---------------------------------------------------------------- */
  --bone:   #f2ece2;
  --bone-2: #b8ada0;
  --bone-3: #7d7367;

  /* --- Accents. Clay and aqua sit at the same lightness and chroma and differ
         only in hue, so neither wins. Lime is the signal. ------------------- */
  --clay:   #e08a5d;   /* oklch(.71 .118 47)  — warm  */
  --aqua:   #4fc2b8;   /* oklch(.74 .088 183) — cool  */
  --lime:   #c8e05a;   /* signal: live state ONLY     */
  --rust:   #d96b6b;   /* alert / pilot escalation    */

  --clay-wash: rgba(224, 138, 93, .14);
  --aqua-wash: rgba(79, 194, 184, .13);
  --lime-wash: rgba(200, 224, 90, .14);
  --rust-wash: rgba(217, 107, 107, .14);

  --line:   rgba(242, 236, 226, .12);
  --line-2: rgba(242, 236, 226, .24);
  --line-3: rgba(224, 138, 93, .34);

  /* --- Semantic ------------------------------------------------------------ */
  --bg: var(--ink); --bg-raised: var(--ink-2); --bg-high: var(--ink-3);
  --fg: var(--bone); --fg-muted: var(--bone-2); --fg-dim: var(--bone-3);
  --accent: var(--clay); --accent-2: var(--aqua); --signal: var(--lime);
  --on-accent: var(--ink);

  /* --- Type. Three voices, one per claim ---------------------------------- */
  /* Changed 2026-09-03 at Youness's request (was Syne / Hanken Grotesk / Space Mono). */
  --display: 'Space Grotesk', 'Trebuchet MS', system-ui, sans-serif;   /* art        */
  --body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;         /* human      */
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;    /* technology */

  --t-xs:   clamp(.70rem, .68rem + .10vw, .76rem);
  --t-sm:   clamp(.82rem, .79rem + .16vw, .92rem);
  --t-base: clamp(.98rem, .94rem + .21vw, 1.09rem);
  --t-lg:   clamp(1.09rem, 1.01rem + .34vw, 1.28rem);
  --t-xl:   clamp(1.30rem, 1.12rem + .74vw, 1.72rem);
  --t-2xl:  clamp(1.72rem, 1.32rem + 1.70vw, 2.85rem);
  --t-3xl:  clamp(2.30rem, 1.55rem + 3.20vw, 4.30rem);
  --t-4xl:  clamp(2.40rem, 1.30rem + 4.90vw, 5.60rem);   /* min lowered: 'plaquette.' touched the edge at 375px */

  --lh-tight: 1.02; --lh-head: 1.15; --lh-body: 1.55;
  --tr-tight: -.024em; --tr-wide: .18em;   /* Space Grotesk wants a touch less tracking than Syne did */

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem;   --s-7:3rem;  --s-8:4rem;   --s-9:6rem; --s-10:8rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 6.5rem);

  --shell: min(1240px, calc(100% - 2 * var(--s-5)));
  --shell-read: min(68ch, calc(100% - 2 * var(--s-5)));

  /* Sharp, not soft. Rounded cards read as consumer SaaS; this is instrumentation. */
  --radius: 3px; --radius-sm: 2px; --radius-pill: 999px;

  --shadow:      0 30px 90px rgba(0, 0, 0, .55);
  --shadow-soft: 0 18px 46px rgba(0, 0, 0, .34);

  --ease:  cubic-bezier(.16, 1, .3, 1);
  --ease2: cubic-bezier(.22, .8, .2, 1);
  --dur: .38s; --dur-fast: .2s; --dur-slow: .9s;

  --z-nav: 200; --z-overlay: 800; --z-modal: 900;
  --tap: 44px;
  /* Height of the ticker + sticky nav, subtracted by the cinematic opening. */
  --chrome: 104px;
  --row-h: 38px;
}

/* Arabic: its own faces, its own rhythm. Latin tracking on Arabic is wrong and
   letter-spacing breaks the joins outright. */
:root:lang(ar), [lang="ar"] {
  --display: 'Cairo', 'Noto Naskh Arabic', serif;
  --body:    'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  --tr-tight: 0;
  --tr-wide: 0;
  --lh-body: 1.85;
  --lh-head: 1.32;
  --lh-tight: 1.28;
}

/* The console inherits the same ground — it was designed dark first. */
[data-surface="console"] { --bg: var(--ink); --radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; --dur-fast: .001s; --dur-slow: .001s; }
}