/*
 * Design tokens: "Two snakes", the learn-python.cloud identity.
 *
 * A cool blueprint ground with Python's own two colours: the blue carries ink
 * accents and links, the yellow is the highlighter and the single primary
 * fill (with dark ink on it). Every colour is one token with its light and
 * dark value (light-dark()); the theme switch only flips color-scheme.
 *
 * Type: Readex Pro for headings in both scripts (one geometric family across
 * Arabic and Latin), IBM Plex Sans Arabic / Plus Jakarta Sans for reading,
 * JetBrains Mono for code.
 */
:root {
  color-scheme: light dark;

  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  --font-display: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-2xs: 0.72rem;
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1.03rem;
  --fs-md: 1.14rem;
  --fs-lg: 1.32rem;
  --fs-xl: 1.62rem;
  --fs-2xl: 2.1rem;
  --fs-3xl: 2.75rem;

  /* Arabic is a connected script: headings need tall leading and no negative tracking. */
  --lh-body: 1.85;
  --lh-tight: 1.6;
  --lh-display: 1.45;
  --tracking-display: 0;
  --weight-display: 700;

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

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --content-width: 760px;
  --page-width: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --topbar-height: 64px;

  /* Surfaces & ink: a cool "blueprint" ground, Python's own blue for ink accents */
  --paper: light-dark(#f3f6fb, #08111f);
  --surface: light-dark(#ffffff, #0e1a2e);
  --surface-2: light-dark(#eaf0f8, #12203a);
  --surface-3: light-dark(#d8e2f0, #1c2d4c);
  --ink: light-dark(#0f1e36, #eef3fb);
  --ink-2: light-dark(#44546f, #a3b3cc);
  --ink-3: light-dark(#56657f, #8b9bb6);
  --rule: light-dark(#dbe3ef, #1b2a44);
  --rule-strong: light-dark(#c3cfe0, #2b3d5e);
  --dot: light-dark(rgb(15 30 54 / 0.07), rgb(163 179 204 / 0.08));
  --paper-grid: light-dark(rgb(55 118 171 / 0.07), rgb(111 168 220 / 0.07));
  --glow-1: light-dark(rgb(55 118 171 / 0.1), rgb(55 118 171 / 0.18));
  --glow-2: light-dark(rgb(255 212 59 / 0.12), rgb(255 212 59 / 0.07));

  /* Accent: Python blue. The yellow is the highlighter and the one primary fill. */
  --accent: light-dark(#2b5f8e, #7fb2e3);
  --accent-hover: light-dark(#1f4a71, #a9cdf0);
  --accent-ink: light-dark(#ffffff, #08111f);
  --accent-soft: light-dark(#e6eff8, #13253f);
  --accent-line: light-dark(rgb(43 95 142 / 0.35), rgb(127 178 227 / 0.4));
  --teal: light-dark(#2b5f8e, #7fb2e3);
  --teal-soft: light-dark(#e6eff8, #13253f);
  --yellow: #ffd43b;
  --yellow-deep: light-dark(#8a6400, #ffd43b);
  --yellow-soft: light-dark(#fff6d1, #2b2610);
  --on-yellow: #1a1606;

  --grad-a: light-dark(#2b5f8e, #7fb2e3);
  --grad-b: light-dark(#2b5f8e, #7fb2e3);
  --grad-c: light-dark(#8a6400, #ffd43b);
  /* The primary button is a flat yellow fill with dark ink (about 13:1). */
  --btn-a: #ffd43b;
  --btn-b: #ffd43b;
  --btn-c: #f5c518;
  --on-btn: #1a1606;
  --brand-gradient: linear-gradient(180deg, #ffde5c, #ffd43b 60%, #f5c518);
  --text-gradient: linear-gradient(90deg, var(--accent), var(--accent));

  --highlight: #ffd43b;
  --highlight-wash: light-dark(rgb(255 212 59 / 0.28), rgb(255 212 59 / 0.16));
  --highlight-ink: #1a1606;
  --highlight-band: light-dark(rgb(255 212 59 / 0.4), rgb(255 212 59 / 0.26));

  /* Semantic state (never used as accent) */
  --ok: light-dark(#0f7a4f, #4ade9a);
  --ok-ink: light-dark(#ffffff, #08111f);
  --ok-soft: light-dark(#e8f7ef, #0c2a1e);
  --bad: light-dark(#b42318, #f97066);
  --bad-ink: light-dark(#ffffff, #08111f);
  --bad-soft: light-dark(#fdeceb, #2c1414);
  --warn: light-dark(#8a5300, #fbbf24);
  --warn-soft: light-dark(#fff5e0, #2a2010);

  /* Code */
  --code-surface: light-dark(#f8fafd, #0a1528);
  --code-gutter: light-dark(#eef3f9, #0d1a30);
  --syn-keyword: light-dark(#2b5f8e, #7fb2e3);
  --syn-string: light-dark(#0f7a4f, #86e0b0);
  --syn-number: light-dark(#8a5300, #ffd43b);
  --syn-comment: light-dark(#6a7890, #7d8ca6);
  --syn-function: light-dark(#7a3fb0, #c9a6f2);
  --syn-operator: light-dark(#44546f, #a3b3cc);
  --syn-variable: light-dark(#0f1e36, #e3eaf5);
  --selection: light-dark(rgb(255 212 59 / 0.35), rgb(255 212 59 / 0.25));

  --series-1: light-dark(#2b5f8e, #7fb2e3);
  --series-2: light-dark(#b58100, #ffd43b);
  --series-3: light-dark(#0f7a4f, #4ade9a);
  --series-4: light-dark(#b0306b, #f472b6);
  --chart-grid: light-dark(#dbe3ef, #1b2a44);
  --chart-axis: light-dark(#c3cfe0, #2b3d5e);

  --shadow-1: 0 1px 2px light-dark(rgb(15 30 54 / 0.06), rgb(0 0 0 / 0.4)), 0 1px 1px light-dark(rgb(15 30 54 / 0.04), rgb(0 0 0 / 0.2));
  --shadow-2: 0 16px 40px -18px light-dark(rgb(15 30 54 / 0.22), rgb(0 0 0 / 0.7)), 0 2px 6px light-dark(rgb(15 30 54 / 0.06), rgb(0 0 0 / 0.35));
  --shadow-glow: 0 22px 50px -28px rgb(255 212 59 / 0.45);
  --focus-ring: 0 0 0 3px light-dark(rgb(43 95 142 / 0.45), rgb(255 212 59 / 0.55));

  --ease: cubic-bezier(0.22, 0.7, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
}

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

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

/* English edition: the site's Latin pair. Arabic glyphs (the language switch) fall back to Plex Arabic. */
:root[lang="en"] {
  --font-body: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-display: "Readex Pro", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --lh-body: 1.7;
  --lh-tight: 1.25;
  --lh-display: 1.1;
  --tracking-display: -0.015em;
}