/*
  Classivo Coding — Design Tokens
  Palette: white / very light blue / soft sky blue / blue-gray / clean neutrals.
  Every color is defined for both light and dark themes. Components must only
  ever reference these custom properties, never raw hex values, so new
  languages/themes can be added without touching component CSS.
*/

:root {
  /* ---- Brand blues ---- */
  --brand-50:  #f2f8ff;
  --brand-100: #e3f0ff;
  --brand-200: #c7e2ff;
  --brand-300: #9fcdff;
  --brand-400: #6badfb;
  --brand-500: #3d8bf0;
  --brand-600: #276bd1;
  --brand-700: #1e53a8;
  --brand-800: #1a4386;
  --brand-900: #17376c;

  /* ---- Blue-gray neutrals ---- */
  --slate-25:  #fbfcfe;
  --slate-50:  #f5f8fb;
  --slate-100: #eaf0f6;
  --slate-200: #d8e2ec;
  --slate-300: #bccbd9;
  --slate-400: #93a6b8;
  --slate-500: #6b7f92;
  --slate-600: #506176;
  --slate-700: #3b4a5c;
  --slate-800: #263140;
  --slate-900: #161e29;
  --slate-950: #0d131b;

  /* ---- Semantic accents ---- */
  --accent-success: #1f9d6b;
  --success-text:   #147150; /* text on the tinted success badge: 5.2:1 */
  --accent-warning: #c17d1f;
  --accent-danger:  #d1453d;
  --accent-info:    var(--brand-500);
  --accent-purple:  #7c5cff;

  /* ---- Typography ----
     Geist (body/UI) + Fraunces (headings) + Geist Mono (code) — chosen to
     evoke the same geometric-sans/editorial-serif pairing as
     totaltypescript.com, whose actual typefaces (Larsseit + Magnat) are
     commercial/self-hosted and not available to link or redistribute here.
     Arabic content overrides both --font-sans and --font-heading to Noto
     Kufi Arabic below (Fraunces/Geist have no Arabic glyphs, and a single
     well-weighted Arabic UI face reads better than forcing a Latin serif
     to fall back mid-page). */
  --font-sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-brand: var(--font-heading);
  --font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.375rem;

  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  /* ---- Radii / shadows / motion ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22, 30, 41, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 30, 41, 0.08);
  --shadow-lg: 0 12px 32px rgba(22, 30, 41, 0.12);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  --header-height: 64px;
  --sidebar-width: 280px;
  --content-max-width: 880px;

  color-scheme: light;

  /* ---- Semantic tokens (light theme, default) ---- */
  --bg-page:        var(--slate-25);
  --bg-surface:      #ffffff;
  --bg-surface-alt:  var(--brand-50);
  --bg-sunken:       var(--slate-50);
  --bg-code:         var(--slate-900);
  --bg-inline-code:  var(--brand-50);
  --bg-overlay:      rgba(13, 19, 27, 0.45);

  --border-subtle: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-focus:  var(--brand-500);

  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-600);
  /* Muted text must still reach 4.5:1 on every light surface (white, brand-50,
     slate-50/100); slate-400 was 2.4:1. */
  --text-muted:     #5a6d80;
  --text-on-brand:  #ffffff;
  --text-code:      #e6edf5;
  --text-link:      var(--brand-600);

  /* brand-600: white text on it (buttons) and it as text on white are both
     5.1:1; brand-500 was 3.4:1. */
  --brand:          var(--brand-600);
  --brand-strong:   var(--brand-700);
  --brand-soft:     var(--brand-100);

  --focus-ring: 0 0 0 3px var(--brand-200);
}

html[lang="ar"] {
  --font-sans: "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-page:        var(--slate-950);
  --bg-surface:      var(--slate-900);
  --bg-surface-alt:  var(--slate-800);
  --bg-sunken:       #10161f;
  --bg-code:         #0a0f16;
  --bg-inline-code:  rgba(61, 139, 240, 0.15);
  --bg-overlay:      rgba(0, 0, 0, 0.6);

  --border-subtle: var(--slate-800);
  --border-strong: var(--slate-700);
  --border-focus:  var(--brand-400);

  --text-primary:   var(--slate-50);
  --text-secondary: var(--slate-300);
  --text-muted:     var(--slate-400);
  --text-on-brand:  var(--slate-950);
  --success-text:   #4cc794;
  --text-code:      #dce6f0;
  --text-link:      var(--brand-300);

  --brand:          var(--brand-400);
  --brand-strong:   var(--brand-300);
  --brand-soft:     rgba(61, 139, 240, 0.16);

  --focus-ring: 0 0 0 3px rgba(61, 139, 240, 0.35);
}

/* Respect OS preference until the user makes an explicit choice (data-theme unset). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg-page:        var(--slate-950);
    --bg-surface:      var(--slate-900);
    --bg-surface-alt:  var(--slate-800);
    --bg-sunken:       #10161f;
    --bg-code:         #0a0f16;
    --bg-inline-code:  rgba(61, 139, 240, 0.15);
    --bg-overlay:      rgba(0, 0, 0, 0.6);
    --border-subtle: var(--slate-800);
    --border-strong: var(--slate-700);
    --border-focus:  var(--brand-400);
    --text-primary:   var(--slate-50);
    --text-secondary: var(--slate-300);
    --text-muted:     var(--slate-400);
    --text-on-brand:  var(--slate-950);
    --success-text:   #4cc794;
    --text-code:      #dce6f0;
    --text-link:      var(--brand-300);
    --brand:          var(--brand-400);
    --brand-strong:   var(--brand-300);
    --brand-soft:     rgba(61, 139, 240, 0.16);
    --focus-ring: 0 0 0 3px rgba(61, 139, 240, 0.35);
  }
}