/* ═══════════════════════════════════════════════════════════
   Birkari Design Tokens
   Cool-silver morph design system · Light + Dark themes
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Light theme (default) ── */
:root {
  /* Surface */
  --bg: #e5eaee;
  --surface: #e5eaee;
  --surface-alt: #d8e0e5;

  /* Text */
  --text-primary: #26313a;
  --text-secondary: #65727e;
  --text-muted: #8d99a4;

  /* Accent — math teal */
  --accent: #3bb5a8;
  --accent-hover: #32a196;
  --accent-text: #fff;

  /* Shadows — pronounced upper-left light and lower-right depth */
  --shadow-raised:
    9px 9px 18px rgba(100, 116, 130, .34),
    -9px -9px 18px rgba(255, 255, 255, .92),
    2px 2px 4px rgba(100, 116, 130, .16),
    -2px -2px 4px rgba(255, 255, 255, .8);
  --shadow-raised-sm:
    5px 5px 10px rgba(100, 116, 130, .3),
    -5px -5px 10px rgba(255, 255, 255, .92),
    1px 1px 2px rgba(100, 116, 130, .14),
    -1px -1px 2px rgba(255, 255, 255, .78);
  --shadow-inset:
    inset 4px 4px 8px rgba(100, 116, 130, .26),
    inset -4px -4px 8px rgba(255, 255, 255, .92),
    inset 1px 1px 2px rgba(100, 116, 130, .12),
    inset -1px -1px 2px rgba(255, 255, 255, .76);
  --shadow-inset-deep:
    inset 6px 6px 14px rgba(100, 116, 130, .34),
    inset -6px -6px 14px rgba(255, 255, 255, .92),
    inset 2px 2px 4px rgba(100, 116, 130, .12),
    inset -2px -2px 4px rgba(255, 255, 255, .78);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Transitions */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* Surface tiers */
  --surface-0: #dce3e8;
  --surface-1: #e5eaee;
  --surface-2: #edf1f4;

  /* Accent gradient */
  --accent-gradient: linear-gradient(135deg, #3bb5a8 0%, #2d9e92 50%, #26877d 100%);
  --accent-glow: rgba(59, 181, 168, .35);

  /* Feedback glows */
  --glow-correct: rgba(58, 138, 58, .4);
  --glow-incorrect: rgba(204, 68, 68, .3);

  /* Premium gold — locked/paid content only (teal stays the action color) */
  --premium: #9c7c26;
  --premium-strong: #b3903a;
  --premium-tint: rgba(179, 144, 58, .13);
  --premium-ring: rgba(179, 144, 58, .32);
  --sheen-a: rgba(255, 250, 235, .9);
  --sheen-b: rgba(212, 175, 90, .28);

  /* Glass */
  --surface-glass: rgba(229, 234, 238, .86);
  --glass-border: rgba(255, 255, 255, .42);

  /* Motion */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Border */
  --border: rgba(78, 92, 105, .1);
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --bg: #2b2822;
  --surface: #353129;
  --surface-alt: #3b3832;

  --text-primary: #ede9e0;
  --text-secondary: #b5afa3;
  --text-muted: #8a847a;

  --accent: #4dcfc0;
  --accent-hover: #5ad9cb;
  --accent-text: #1a1a18;

  --shadow-raised: 6px 6px 14px rgba(0,0,0,.4), -6px -6px 14px rgba(72,68,58,.3);
  --shadow-raised-sm: 4px 4px 10px rgba(0,0,0,.35), -4px -4px 10px rgba(72,68,58,.25);
  --shadow-inset: inset 3px 3px 7px rgba(0,0,0,.35), inset -3px -3px 7px rgba(72,68,58,.22);
  --shadow-inset-deep: inset 4px 4px 10px rgba(0,0,0,.45), inset -4px -4px 10px rgba(72,68,58,.28);

  --surface-0: #282520;
  --surface-1: #353129;
  --surface-2: #3b3832;

  --accent-gradient: linear-gradient(135deg, #4dcfc0 0%, #3bb5a8 50%, #2d9e92 100%);
  --accent-glow: rgba(77, 207, 192, .3);

  --glow-correct: rgba(125, 202, 112, .35);
  --glow-incorrect: rgba(240, 128, 128, .3);

  --premium: #e3c27c;
  --premium-strong: #d4af5e;
  --premium-tint: rgba(227, 194, 124, .1);
  --premium-ring: rgba(227, 194, 124, .3);
  --sheen-a: rgba(255, 232, 170, .17);
  --sheen-b: rgba(255, 214, 130, .06);

  --surface-glass: rgba(48, 45, 39, .78);
  --glass-border: rgba(255, 255, 255, .06);

  --border: rgba(255,255,255,.06);
}

/* ── Base ── */
html {
  scroll-behavior: smooth;
  /* iOS Safari paints the status-bar / overscroll region with the root
     element's own background — without this it stays light in dark mode */
  background: var(--bg);
  transition: background var(--duration-slow);
}

body {
  font-family: 'Noto Sans Arabic', 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100dvh;
  /* clip, not hidden: hidden turns the body into a scroll box on iOS
     Safari, which silently disables root scroll-snapping (landing slides).
     Old browsers without clip support fall back to the hidden line. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  transition: background var(--duration-slow), color var(--duration-slow);
}



/* ── Typography scale ── */
.text-xs  { font-size: 0.65rem; }
.text-sm  { font-size: 0.75rem; }
.text-md  { font-size: 0.875rem; }
.text-lg  { font-size: 1.1rem; }
.text-xl  { font-size: 1.5rem; }
.text-2xl { font-size: clamp(1.6rem, 4vw, 2.2rem); }

/* ── Latin font helper ── */
.font-latin {
  font-family: 'Inter', 'Outfit', system-ui, -apple-system, sans-serif;
}

/* ── Typography polish ── */
h1, h2, h3, h4, h5, h6,
.text-lg, .text-xl, .text-2xl {
  letter-spacing: -0.01em;
}

/* Improved line-height for Arabic/CKB script readability */
:where([lang="ckb"], [dir="rtl"]) {
  line-height: 1.95;
}