/* ============================================================
   Mamopedia — Design tokens
   A friendly, multilingual learning companion for Iraqi students
   (Arabic · Kurdish · English). Import once at the root.
   ============================================================ */

/* --- Single typeface for every language. Noto Kufi Arabic covers Arabic,
       Kurdish (Sorani) and Latin, so we ship one face for the whole UI.
       Swap for a licensed brand face when available. --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand palette (sampled from official logos) ----
     Three signature colors from the book-mark: a trio that
     reads as diverse-learners-side-by-side. Used with intent,
     never all three shouting at once. */
  --blue-600:    #4179BE;   /* Primary brand blue */
  --blue-700:    #325F97;   /* Hover on solid blue */
  --blue-800:    #254770;   /* Text on paper — AA ✓ (7.8:1) */
  --blue-200:    #C7D7EA;
  --blue-100:    #E3EDF6;
  --blue-050:    #F0F5FA;

  --coral-500:   #F88672;   /* Signature coral — warmth, encouragement */
  --coral-600:   #E56B55;   /* Hover */
  --coral-700:   #B84A37;   /* Text on paper — AA ✓ (4.9:1) */
  --coral-200:   #FCCFC5;
  --coral-100:   #FDE3DC;
  --coral-050:   #FEF1ED;

  --green-500:   #7EA377;   /* Signature green — growth, progress */
  --green-600:   #5F8258;   /* Hover */
  --green-700:   #3F6139;   /* Text on paper — AA ✓ (6.8:1) */
  --green-200:   #C8D5C4;
  --green-100:   #E0E9DD;
  --green-050:   #F1F5EF;

  /* Neutrals — warm, paper-like, never pure */
  --ink:         #1E1E1E;   /* Body text — AA ✓ (16.1:1) */
  --ink-2:       #3A3A3A;   /* Secondary — AA ✓ (10.4:1) */
  --ink-3:       #6B6B6B;   /* Tertiary meta — AA ✓ (4.6:1) */
  --ink-4:       #A5A5A5;   /* Disabled text */

  --paper:       #FAFAF7;   /* Default surface — soft off-white */
  --paper-2:     #F3F2EC;   /* Raised card / muted section */
  --paper-3:     #E8E7DF;   /* Stronger neutral surface */
  --line:        #E2E1D8;   /* Hairline borders */
  --line-strong: #C9C7BC;

  --white:       #FFFFFF;
  --black:       #0D0D0B;

  /* ---- Semantic roles ---- */
  --bg:            var(--paper);
  --bg-raised:     var(--white);
  --bg-muted:      var(--paper-2);
  --bg-inverse:    var(--blue-800);

  --fg:            var(--ink);
  --fg-2:          var(--ink-2);
  --fg-3:          var(--ink-3);
  --fg-inverse:    var(--white);

  --primary:       var(--green-500);
  --primary-hover: var(--green-600);
  --primary-ink:   var(--green-700);
  --primary-soft:  var(--green-100);

  --accent-warm:   var(--coral-500);
  --accent-warm-ink: var(--coral-700);
  --accent-warm-soft: var(--coral-100);

  --accent-cool:   var(--blue-600);
  --accent-cool-ink: var(--blue-800);
  --accent-cool-soft: var(--blue-100);

  --link:          var(--green-700);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --focus-ring:    var(--green-500);

  /* Status */
  --success:       var(--green-700);
  --success-soft:  var(--green-100);
  --warning:       #B5761A;
  --warning-soft:  #FBEFD6;
  --danger:        var(--coral-700);
  --danger-soft:   var(--coral-100);
  --info:          var(--blue-700);
  --info-soft:     var(--blue-100);
  --growth:        var(--green-700);
  --growth-soft:   var(--green-100);

  /* ---- Typography ----
     Single typeface: Noto Kufi Arabic. Covers Arabic and Kurdish (Sorani)
     shaping (handles the extra letters ڕ ڤ ۆ ێ ڵ ی) and renders Latin
     text in a humanist style that pairs naturally with the Arabic word-
     mark, so the brand feels coherent regardless of UI language. */
  --font-arabic:  'Noto Kufi Arabic', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --font-latin:   var(--font-arabic);
  --font-sans:    var(--font-arabic);
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (mobile-first; headings scale via clamp) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   40px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;   /* Arabic reads better with more leading */

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* ---- Spacing (4px base) ---- */
  --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;

  /* ---- Radii (friendly, not childish) ---- */
  --r-xs:   6px;
  --r-sm:   10px;   /* buttons, inputs */
  --r-md:   16px;   /* cards, chat bubbles */
  --r-lg:   24px;   /* sheets, hero tiles */
  --r-pill: 999px;

  /* ---- Shadows (cool-tinted, subtle) ---- */
  --shadow-sm: 0 1px 2px rgba(37, 71, 112, 0.06);
  --shadow-md: 0 6px 20px rgba(37, 71, 112, 0.08);
  --shadow-lg: 0 16px 40px rgba(37, 71, 112, 0.10);

  /* ---- Motion ---- */
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.68, 0.3);
  --dur-1: 150ms;
  --dur-2: 220ms;
  --dur-3: 320ms;

  /* ---- Layout ---- */
  --measure:    68ch;
  --tabbar-h:   72px;
  --topbar-h:   56px;
  --sidebar-w:  272px;

  color-scheme: light;
}

/* ============================================================
   Dark mode — warm, paper-like inversion
   Triggered two ways:
     1. Explicit:  <html data-theme="dark">   (user choice wins)
     2. System:    prefers-color-scheme: dark (when no data-theme set)
   Brand hues are nudged lighter so CTAs, pills and links stay
   AA on the darker surfaces. Neutrals stay warm (book-paper
   at night), never pure slate or cold charcoal.
   ============================================================ */

:root[data-theme="dark"] {
  /* ---- Neutrals — warm night paper ----
     Based around a 12-tone ramp from near-black (0D0C09) to
     a soft off-white (F2EFE7). Hue sits at ~60° to echo the
     warm light palette instead of reading as cold slate. */
  --ink:         #F2EFE7;   /* Body text on dark — AA ✓ (15.3:1) */
  --ink-2:       #D6D2C6;   /* Secondary — AA ✓ (10.1:1) */
  --ink-3:       #9E9A8E;   /* Tertiary / meta — AA ✓ (4.7:1) */
  --ink-4:       #6A6760;   /* Disabled text */

  --paper:       #17160F;   /* Default surface — warm near-black */
  --paper-2:     #221F17;   /* Raised card / muted section */
  --paper-3:     #2E2B22;   /* Stronger neutral surface */
  --line:        #2F2C23;   /* Hairline borders */
  --line-strong: #433F33;

  --white:       #17160F;   /* Re-mapped: what was "pure white" is now the base */
  --black:       #F2EFE7;   /* Re-mapped: "pure black" becomes the lightest text */

  /* ---- Brand ramps — lifted for AA on dark surfaces ----
     Only the on-paper-text shades are swapped to the lighter
     200/100 tints; the 500/600 brand hues keep their identity
     because they're used on tints and CTA backgrounds. */
  --blue-800:    #C7D7EA;   /* Was ink-on-paper; now lightest tint for text */
  --blue-700:    #7FA6D2;   /* Hover on solid blue — brightened */
  --blue-600:    #5F92D0;   /* Primary blue, slightly lifted */
  --blue-200:    #2B4A70;   /* Dark tint for pill backgrounds */
  --blue-100:    #1F3654;   /* Softer pill / chip bg */
  --blue-050:    #182945;

  --coral-700:   #FCCFC5;   /* Light tint for coral text on dark */
  --coral-600:   #FF9C86;   /* Brightened hover */
  --coral-500:   #FA8B77;
  --coral-200:   #6E2F24;
  --coral-100:   #4E2118;
  --coral-050:   #3A1912;

  --green-700:   #C8D5C4;   /* Light tint for green text on dark */
  --green-600:   #9DC094;   /* Brightened hover */
  --green-500:   #8CB485;   /* Primary lifted slightly */
  --green-200:   #3E5B3A;
  --green-100:   #2A3F27;
  --green-050:   #1F2F1D;

  /* ---- Semantic roles — re-bound ---- */
  --bg:            var(--paper);
  --bg-raised:     var(--paper-2);   /* Cards raise *up* into the light */
  --bg-muted:      var(--paper-3);
  --bg-inverse:    #E8EDF4;          /* Flip: a bright inverse panel on dark */

  --fg:            var(--ink);
  --fg-2:          var(--ink-2);
  --fg-3:          var(--ink-3);
  --fg-inverse:    #17160F;

  --primary:       var(--green-500);
  --primary-hover: var(--green-600);
  --primary-ink:   var(--green-700);
  --primary-soft:  var(--green-100);

  --accent-warm:      var(--coral-500);
  --accent-warm-ink:  var(--coral-700);
  --accent-warm-soft: var(--coral-100);

  --accent-cool:      var(--blue-600);
  --accent-cool-ink:  var(--blue-800);
  --accent-cool-soft: var(--blue-100);

  --link:          var(--green-700);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --focus-ring:    var(--green-500);

  /* Status */
  --success:       var(--green-700);
  --success-soft:  var(--green-100);
  --warning:       #E9C37A;
  --warning-soft:  #3B2F15;
  --danger:        var(--coral-700);
  --danger-soft:   var(--coral-100);
  --info:          var(--blue-700);
  --info-soft:     var(--blue-100);
  --growth:        var(--green-700);
  --growth-soft:   var(--green-100);

  /* ---- Shadows — deepened, cool tint ----
     On dark, ambient shadow is less visible; replace with a
     subtle *lifted* edge via brighter top border on cards. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* System preference — only applies when the user hasn't set data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ink:         #F2EFE7;
    --ink-2:       #D6D2C6;
    --ink-3:       #9E9A8E;
    --ink-4:       #6A6760;

    --paper:       #17160F;
    --paper-2:     #221F17;
    --paper-3:     #2E2B22;
    --line:        #2F2C23;
    --line-strong: #433F33;

    --white:       #17160F;
    --black:       #F2EFE7;

    --blue-800:    #C7D7EA;
    --blue-700:    #7FA6D2;
    --blue-600:    #5F92D0;
    --blue-200:    #2B4A70;
    --blue-100:    #1F3654;
    --blue-050:    #182945;

    --coral-700:   #FCCFC5;
    --coral-600:   #FF9C86;
    --coral-500:   #FA8B77;
    --coral-200:   #6E2F24;
    --coral-100:   #4E2118;
    --coral-050:   #3A1912;

    --green-700:   #C8D5C4;
    --green-600:   #9DC094;
    --green-500:   #8CB485;
    --green-200:   #3E5B3A;
    --green-100:   #2A3F27;
    --green-050:   #1F2F1D;

    --bg-raised:   var(--paper-2);
    --bg-muted:    var(--paper-3);
    --bg-inverse:  #E8EDF4;
    --fg-inverse:  #17160F;

    --warning:      #E9C37A;
    --warning-soft: #3B2F15;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

/* ============================================================
   Base element styles — semantic defaults
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { margin: 0; font-family: var(--font-sans); color: var(--fg); background: var(--bg); }

/* Arabic / Kurdish get a touch more leading for comfortable reading.
   The font family is shared across languages, so no swap needed here. */
:lang(ar), :lang(ckb), :lang(ku) {
  line-height: var(--lh-relaxed);
}
[dir="rtl"] { direction: rtl; text-align: right; }

::selection { background: var(--blue-100); color: var(--blue-800); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}