/* =========================================================================
   Rubikal — Design Tokens
   One source of truth for color, type, spacing, motion. Retheme from here.

   BRIDGED to the one-pager's system (assets/css/one.css): same type, same
   blue-black void ramp, same paper act, same accent, calmer radii. The
   subpages keep their own components — only this token layer, the HUD eyebrow
   voice, and the button language are shared, so /en/ and /en/services.html
   read as one site instead of two.
   ========================================================================= */

:root {
  /* ---- Brand (from the Rubikal cube logo) ------------------------------- */
  --brand-blue:   #1E60FD;  /* logo blue   */
  --brand-pink:   #FF0054;  /* logo pink   */
  --brand-yellow: #F8CE3A;  /* logo yellow */
  --brand-violet: #6A47F0;  /* blue↔pink blend, for gradient midpoint */
  --brand-indigo: #3D63FF;

  /* Brand gradients survive for surfaces (soft washes, rules, blobs). They
     are no longer used for text or buttons: gradient text is the single
     loudest AI-default tell, and the cube is the only saturated object. */
  --grad-brand: linear-gradient(120deg, #1E60FD 0%, #6A47F0 52%, #FF0054 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(30,96,253,.18), rgba(255,0,84,.15));

  /* ---- Neutral ramp — the one-pager's blue-black void, never pure black -- */
  --void-950: #04050A;
  --void-900: #060810;
  --void-850: #090B16;
  --void-800: #0D101E;
  --void-700: #141830;
  /* legacy names kept as aliases: main.css still consumes --ink-* */
  --ink-900: var(--void-950);
  --ink-850: var(--void-900);
  --ink-800: var(--void-850);
  --ink-700: var(--void-800);
  --ink-600: var(--void-700);

  /* "Light" is the dossier paper act from the one-pager, not SaaS white */
  --paper:     #F3F0E9;
  --paper-2:   #EAE6DB;
  --paper-0:   #FFFDF8;
  --paper-50:  var(--paper);
  --paper-100: var(--paper-2);
  --paper-200: #DFDACE;

  /* ---- Radii (calmer caps, matching one.css) ---------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* ---- Spacing scale ---------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Section rhythm (fluid) */
  --section-y: clamp(72px, 9vw, 144px);
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1440px;
  --maxw-narrow: 820px;

  /* ---- Typography ------------------------------------------------------- */
  /* Tajawal sits second so Arabic runs resolve per-character on mixed pages;
     rtl.css puts it first for the Arabic tree. */
  --font-display: "Clash Display", "Tajawal", system-ui, sans-serif;
  --font-body: "Satoshi", "Tajawal", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Fluid type scale */
  --t-display: clamp(2.6rem, 6.5vw, 5.4rem);
  --t-h1: clamp(2.2rem, 5vw, 3.9rem);
  --t-h2: clamp(1.8rem, 3.4vw, 2.9rem);
  --t-h3: clamp(1.3rem, 2vw, 1.7rem);
  --t-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-eyebrow: 0.74rem;      /* HUD mono, matching one.css --t-mono */

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;
  --tracking-eyebrow: 0.22em;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.8s;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(8, 8, 20, 0.08);
  --shadow-md: 0 18px 40px -18px rgba(8, 8, 20, 0.28);
  --shadow-lg: 0 40px 80px -30px rgba(8, 8, 20, 0.45);
  --glow: 0 0 60px -10px rgba(30, 96, 253, 0.45);

  --header-h: 72px;
}

/* Wide-gamut accents where supported — same upgrade the one-pager uses */
@supports (color: color(display-p3 0 0 0)) {
  :root {
    --brand-blue:   color(display-p3 .18 .38 1);
    --brand-pink:   color(display-p3 1 .08 .36);
    --brand-yellow: color(display-p3 .98 .81 .27);
  }
}

/* =========================================================================
   THEME SCOPES — every section declares data-theme="dark|light".
   These vars are what components actually consume.
   ========================================================================= */

/* --accent is a UI colour (fills, borders, glows, focus rings). --accent-ink is
   the text-grade sibling: #1E60FD measures 4.02:1 on the void ramp, so anything
   that has to be *read* uses --accent-ink (≥4.5:1 on both themes). */
[data-theme="dark"] {
  --bg: var(--void-950);
  --bg-elev: var(--void-850);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --fg: #EAECF6;
  --fg-strong: #FFFFFF;
  --muted: #8E93AD;
  --faint: #575D78;            /* decoration only — 3.14:1 on --void-950 */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --accent: var(--brand-blue);
  --accent-ink: #6C9FFF;
  --accent-2: var(--brand-pink);
  --on-accent: #FFFFFF;
  --card: rgba(255, 255, 255, 0.03);
  --card-shadow: var(--shadow-lg);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: var(--paper);
  --bg-elev: var(--paper-0);
  --surface: var(--paper-2);
  --surface-2: var(--paper-200);
  --fg: #2A2822;
  --fg-strong: #14151E;
  --muted: #57544B;
  --faint: #6B6455;
  --border: rgba(20, 21, 30, 0.10);
  --border-strong: rgba(20, 21, 30, 0.20);
  --accent: var(--brand-blue);
  --accent-ink: #14459E;       /* 6.2:1 on the paper act */
  --accent-2: #B0331E;
  --on-accent: #FFFFFF;
  --card: #FFFDF8;
  --card-shadow: var(--shadow-md);
  color-scheme: light;
}