/* ============================================================
   REBUILT — tokens.css
   Single source of truth for the design system.

   Brand source: "REBUILT Brand Identity" (Omar ELzanay)
     #FFE504  brand yellow   — primary action, earned / achieved
     #FD662B  brand orange   — energy, streaks, emphasis
     #FFFFFF  white          — text on dark
     #201F19  warm dark      — surfaces
   The logo gradient (orange → yellow) and the rising-stair motif
   are the only decorative devices. Everything else is neutral.

   Functional (non-brand) colours — success / danger — are kept to
   the minimum a UI needs to communicate state; they are never used
   decoratively.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- Brand ---------- */
  --brand-yellow: #ffe504;
  --brand-orange: #fd662b;
  --brand-white: #ffffff;
  --brand-dark: #201f19;

  /* Logo gradient stops (taken from the vector logo) */
  --brand-amber: #ffb500;
  --grad-brand: linear-gradient(135deg, #fd662b 0%, #ffb500 55%, #ffe504 100%);
  /* Progress fills run from the inline-start (right in RTL) to the head. */
  --grad-progress: linear-gradient(270deg, #fd662b 0%, #ffb500 60%, #ffe504 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(253, 102, 43, 0.16), rgba(255, 229, 4, 0.1));

  /* ---------- Surfaces (warm neutrals derived from #201F19) ---------- */
  --bg: #151410;
  --bg-deep: #100f0b;
  --surface: #201f19; /* = brand dark */
  --surface-2: #2a2921;
  --surface-3: #35342a;
  --surface-hover: #2e2d24;
  --overlay: rgba(10, 9, 6, 0.72);

  --border: #3b3a2f;
  --border-soft: #2c2b22;
  --border-strong: #55533f;

  /* ---------- Text ---------- */
  --ink: #f8f6ec; /* warm white */
  --ink-soft: #bdb9a6;
  --ink-faint: #948f7c; /* ≥ 4.5:1 on --surface */
  --ink-on-brand: #201f19; /* text on yellow / gradient fills */

  /* ---------- Roles ---------- */
  --primary: var(--brand-yellow);
  --primary-hover: #fff04d;
  --primary-press: #e6cf00;
  --accent: var(--brand-orange);
  --accent-soft: rgba(253, 102, 43, 0.14);
  --primary-soft: rgba(255, 229, 4, 0.12);

  --success: #5fd49a;
  --success-soft: rgba(95, 212, 154, 0.14);
  --danger: #ff5e72;
  --danger-soft: rgba(255, 94, 114, 0.14);

  --ring-track: rgba(255, 255, 255, 0.08);
  --focus-ring: #ffe504;

  /* Legacy aliases so un-migrated markup (AI chat log) keeps working */
  --accent-strong: var(--brand-yellow);
  --accent-ink: var(--ink-on-brand);
  --accent-2: var(--brand-orange);
  --good: var(--success);

  /* ---------- Typography ---------- */
  --font-ui: "Cairo", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, -apple-system, Arial, sans-serif;
  /* Brand display face = Arial Narrow Bold/Black. Archivo Narrow is the
     web-safe stand-in when Arial Narrow isn't installed. */
  --font-display: "Arial Narrow", "Archivo Narrow", "Cairo", Arial, sans-serif;

  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs: 0.75rem; /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.9375rem; /* 15 */
  --fs-lg: 1.0625rem; /* 17 */
  --fs-xl: 1.25rem; /* 20 */
  --fs-2xl: 1.5rem; /* 24 */
  --fs-3xl: 2rem; /* 32 */
  --fs-4xl: 2.75rem; /* 44 */
  --fs-5xl: 3.75rem; /* 60 */

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.7;

  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---------- Shape ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --glow-brand: 0 8px 28px -8px rgba(253, 102, 43, 0.55);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 480ms;

  /* ---------- Layout ---------- */
  --sidebar-w: 268px;
  --rail-w: 80px;
  --topbar-h: 60px;
  --mobile-nav-h: 64px;
  --content-max: 1180px;
  --gutter: 32px;

  /* Safe-area aware insets (notched phones) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Used by brand SVGs (logo ink + counters) */
  --rb-ink: #ffffff;
  --rb-bg: #201f19;
}

@media (max-width: 1079px) {
  :root { --gutter: 24px; }
}

@media (max-width: 719px) {
  :root { --gutter: 16px; --fs-3xl: 1.75rem; --fs-4xl: 2.25rem; --fs-5xl: 2.75rem; }
}