/* ==========================================================================
   Design tokens — shadcn/ui "neutral" theme, ported to plain CSS variables.
   The brand colour is black (--primary). Colour comes from the course covers
   and from the hue tokens below, which tint categories, avatars and notes.
   ========================================================================== */

:root {
  color-scheme: light;

  /* shadcn neutral — light */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  /* shadcn ships 0.556 here, which reads 4.3:1 on --muted. 0.53 clears 4.5:1 on every surface. */
  --muted-foreground: oklch(0.53 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  /* shadcn sidebar tokens */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* Meaning */
  --success: #059669;
  --star: #f59e0b;

  /* The dark welcome panel keeps its colours in both themes */
  --hero: oklch(0.205 0 0);
  --hero-foreground: oklch(0.985 0 0);
  --hero-muted: oklch(1 0 0 / 68%);
  --hero-border: transparent;

  /* Code colours */
  --code-keyword: #7c3aed;
  --code-string: #047857;
  --code-number: #b45309;
  --code-function: #1d4ed8;

  /* Radius — shadcn scale */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* Type — Thmanyah Sans for text (see @font-face in base.css), IBM Plex Mono for code */
  --font-sans: "Thmanyah Sans", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Thmanyah Sans", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. Every font size in the template is one of these ten steps. */
  --text-2xs: 0.6875rem; /* 11px  counters */
  --text-xs: 0.75rem;    /* 12px  captions, meta */
  --text-sm: 0.875rem;   /* 14px  controls, secondary text, code */
  --text-base: 1rem;     /* 16px  body, card titles */
  --text-lg: 1.125rem;   /* 18px  lesson text, leads */
  --text-xl: 1.25rem;    /* 20px  small headings */
  --text-2xl: 1.5rem;    /* 24px  section headings */
  --text-3xl: 1.875rem;  /* 30px  page titles (small screens), prices */
  --text-4xl: 2.25rem;   /* 36px  page titles */
  --text-5xl: 3rem;      /* 48px  the home page headline */

  /* Line heights. Arabic needs more room than Latin, so none is below 1.4. */
  --leading-heading: 1.4;
  --leading-snug: 1.5;   /* labels, one-line meta, card titles */
  --leading-normal: 1.75; /* paragraphs in the interface */
  --leading-prose: 2;    /* long-form lesson and article text */

  /* Elevation */
  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04), 0 2px 8px -2px oklch(0 0 0 / 0.06);
  --shadow-md: 0 2px 4px oklch(0 0 0 / 0.04), 0 14px 32px -12px oklch(0 0 0 / 0.16);

  /* Layout */
  --sidebar-w: 17.5rem;
  --tools-w: 22rem; /* the lesson's tools column */
  --topbar-h: 3.75rem;
  --inset-gap: 0.5rem;
  --measure: 44rem; /* reading column */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* The sidebar slides in from the inline-start edge, the cart sheet from the inline-end edge */
  --sidebar-offset: -100%;
  --sheet-offset: 100%;
}

[dir="rtl"] {
  --sidebar-offset: 100%;
  --sheet-offset: -100%;
}

.dark {
  color-scheme: dark;

  /* shadcn neutral — dark */
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);

  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);

  --success: #34d399;
  --hero-border: var(--border);

  --code-keyword: #c4b5fd;
  --code-string: #6ee7b7;
  --code-number: #fcd34d;
  --code-function: #93c5fd;

  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.3);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 8px -2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 2px 4px oklch(0 0 0 / 0.3), 0 14px 32px -12px oklch(0 0 0 / 0.7);
}

/* ---------- Hues ----------
   Put data-hue="blue" on an element to give it and its children three colours:
   --hue-bg (a soft tint), --hue-fg (readable text on that tint), --hue-solid.
   The same seven hues colour the course covers in assets/img/covers. */

[data-hue="rose"]    { --hue-bg: #ffe4e6; --hue-fg: #be123c; --hue-solid: #f43f5e; --hue-light: #fda4af; }
[data-hue="amber"]   { --hue-bg: #fef3c7; --hue-fg: #b45309; --hue-solid: #f59e0b; --hue-light: #fcd34d; }
[data-hue="emerald"] { --hue-bg: #d1fae5; --hue-fg: #047857; --hue-solid: #10b981; --hue-light: #6ee7b7; }
[data-hue="sky"]     { --hue-bg: #e0f2fe; --hue-fg: #0369a1; --hue-solid: #0ea5e9; --hue-light: #7dd3fc; }
[data-hue="blue"]    { --hue-bg: #dbeafe; --hue-fg: #1d4ed8; --hue-solid: #3b82f6; --hue-light: #93c5fd; }
[data-hue="violet"]  { --hue-bg: #ede9fe; --hue-fg: #6d28d9; --hue-solid: #8b5cf6; --hue-light: #c4b5fd; }
[data-hue="slate"]   { --hue-bg: #f1f5f9; --hue-fg: #334155; --hue-solid: #64748b; --hue-light: #cbd5e1; }

.dark [data-hue] {
  --hue-bg: color-mix(in oklch, var(--hue-solid) 20%, transparent);
  --hue-fg: var(--hue-light);
}