/* Design tokens — the single source of truth for colour, type, shape, motion.
 * No component may contain a raw hex value.
 *
 * Sampled from the ملازم التفوق store: a dark maroon frame around a
 * cream-and-peach world, with orange as the only loud colour.
 */

:root {
  /* Brand */
  --maroon-900: #3E1414;
  --maroon-800: #4A1B1B;
  --maroon-600: #6E2F2F;
  --orange-500: #F0854A;
  --orange-300: #F6B48E;
  --peach-200:  #F8D5C2;
  --peach-100:  #FBE6DA;
  --cream-50:   #FBF2EA;
  --white:      #FFFFFF;

  /* Feedback — always paired with an icon and a word, never colour alone */
  --correct-600: #3F8A5C;
  --correct-100: #DDEFE3;
  --wrong-600:   #D14A44;
  --wrong-100:   #F9DEDB;
  --guess-600:   #B8801F;
  --guess-100:   #F7EBD2;

  /* Semantic */
  --bg: var(--cream-50);
  --surface: var(--white);
  --surface-2: var(--peach-100);
  --text: var(--maroon-800);
  --text-muted: #7A5A55;
  --line: #E9CFC1;
  --accent: var(--orange-500);
  /* Deliberately outside the palette so it can never be mistaken for decoration. */
  --focus: #2E6DD8;

  /* Type */
  --font-display: 'Baloo Bhaijaan 2', 'Cairo', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;

  --t-hero: 2.25rem;
  --t-h1: 1.75rem;
  --t-h2: 1.25rem;
  --t-question: 1.25rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.8125rem;   /* never smaller */

  /* Shape — hierarchy through radius, not only size */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --stroke-w: 2.5px;
  --stroke-c: var(--maroon-800);
  --shadow-cut: 4px 4px 0 0 var(--stroke-c);
  --shadow-cut-sm: 2px 2px 0 0 var(--stroke-c);
  --shadow-soft: 0 6px 20px rgba(74, 27, 27, 0.08);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Motion — departures are always faster than arrivals */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
  :root {
    --t-hero: 3rem;
    --t-h1: 2.25rem;
    --t-h2: 1.5rem;
    --t-question: 1.375rem;
  }
}

/* Night mode is the store's header colour spread across the page, not grey. */
[data-theme="night"] {
  --bg: var(--maroon-900);
  --surface: #4F2323;
  --surface-2: #5C2C2C;
  --text: #FBE6DA;
  --text-muted: #D9B5A8;
  --line: #6E3A3A;
  /* The cutout outline flips to peach: a maroon stroke on a maroon card is
     invisible, which would lose the paper-cutout read entirely. */
  --stroke-c: var(--peach-200);
  --shadow-cut: 4px 4px 0 0 #1F0808;
  --shadow-cut-sm: 2px 2px 0 0 #1F0808;
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.35);

  --correct-100: #2F5A41;
  --wrong-100: #6B2B28;
  --guess-100: #5A4520;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  padding-block-end: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: var(--font-display); line-height: 1.25; }

/* Focus is only shown for keyboard users, and is never removed. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.tap {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  cursor: pointer;
}

/* Numbers that carry meaning line up in columns. */
.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Doodles ---------- */

.doodle { display: block; width: 100%; height: 100%; }

/* The loading mark draws itself rather than spinning. */
.doodle--draw path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: doodle-draw 900ms linear infinite;
}

@keyframes doodle-draw {
  0%   { stroke-dashoffset: 120; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -120; }
}