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

: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;

  /* Signature gradient: blue → violet → pink, echoing the tri-colour cube */
  --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));
  --grad-text: linear-gradient(120deg, #7FB0FF 0%, #B79BFF 48%, #FF7AA0 100%);

  /* ---- Neutral ramp ----------------------------------------------------- */
  --ink-900: #07070C;
  --ink-850: #0B0B14;
  --ink-800: #10101C;
  --ink-700: #181826;
  --ink-600: #232336;
  --paper-0: #FFFFFF;
  --paper-50: #FAF9F6;
  --paper-100: #F4F2EC;
  --paper-200: #E9E6DD;

  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --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: 1240px;
  --maxw-narrow: 820px;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Space Grotesk", "Tajawal", system-ui, sans-serif;
  --font-body: "Inter", "Tajawal", system-ui, sans-serif;

  /* 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.78rem;

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

  /* ---- 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: 76px;
}

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

[data-theme="dark"] {
  --bg: var(--ink-900);
  --bg-elev: var(--ink-800);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --fg: #F3F3FA;
  --fg-strong: #FFFFFF;
  --muted: #9C9CB8;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --accent: #5C8DFF;
  --accent-2: #FF4D7D;
  --on-accent: #07070C;
  --card: rgba(255, 255, 255, 0.035);
  --card-shadow: var(--shadow-lg);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: var(--paper-50);
  --bg-elev: var(--paper-0);
  --surface: var(--paper-100);
  --surface-2: var(--paper-200);
  --fg: #14141F;
  --fg-strong: #07070C;
  --muted: #59596B;
  --border: rgba(10, 10, 25, 0.10);
  --border-strong: rgba(10, 10, 25, 0.16);
  --accent: var(--brand-blue);
  --accent-2: var(--brand-pink);
  --on-accent: #FFFFFF;
  --card: var(--paper-0);
  --card-shadow: var(--shadow-md);
  color-scheme: light;
}