/* ==========================================================================
   Design tokens (ADR 0001)
   --------------------------------------------------------------------------
   Every colour in the UI comes from a token in this file. Themes are token
   overrides only: light is the default, dark is applied by
     • [data-theme="dark"] on <html> (explicit choice), or
     • prefers-color-scheme: dark when <html data-theme="auto">.
   base.html renders data-theme="auto"; there is no theme switch in the UI yet.

   Breakpoints (media queries can't read custom properties — use literals):
     sm  640px   — header shows the user's name, cards go 2-up
     md  900px   — course page gets its aside, tables stop being cards
     lg  1200px  — max container width
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --c-bg: oklch(0.972 0.009 80);          /* page background, warm paper   */
  --c-surface: oklch(0.994 0.004 80);     /* cards, panels, inputs         */
  --c-surface-2: oklch(0.951 0.011 80);   /* subtle fills, hovers, wells   */
  --c-surface-3: oklch(0.918 0.014 78);   /* pressed, track of a progress  */

  /* Text */
  --c-text: oklch(0.255 0.018 60);
  --c-text-muted: oklch(0.47 0.018 60);
  --c-link: oklch(0.42 0.075 192);

  /* Lines */
  --c-line: oklch(0.885 0.012 75);        /* decorative dividers           */
  --c-line-strong: oklch(0.6 0.014 70);   /* field & control boundaries ≥3:1 */

  /* Accent — deep teal */
  --c-accent: oklch(0.47 0.072 192);
  --c-accent-hover: oklch(0.41 0.068 192);
  --c-accent-soft: oklch(0.935 0.026 190);
  --c-accent-text: oklch(0.4 0.068 192);
  --c-on-accent: oklch(0.99 0.004 80);

  /* Status: ok — «Принят» */
  --c-ok: oklch(0.5 0.1 152);
  --c-ok-hover: oklch(0.44 0.095 152);
  --c-ok-soft: oklch(0.94 0.035 152);
  --c-ok-text: oklch(0.4 0.085 152);
  --c-on-ok: oklch(0.99 0.004 80);

  /* Status: warn — «На доработку» (terracotta) */
  --c-warn: oklch(0.53 0.13 42);
  --c-warn-hover: oklch(0.47 0.125 42);
  --c-warn-soft: oklch(0.94 0.032 50);
  --c-warn-text: oklch(0.45 0.12 42);
  --c-on-warn: oklch(0.99 0.004 80);

  /* Status: pending — «На проверке» (ink blue) */
  --c-pending: oklch(0.5 0.09 250);
  --c-pending-soft: oklch(0.94 0.025 250);
  --c-pending-text: oklch(0.42 0.085 250);

  /* Status: neutral — «Не отвечено», «Недоступен» */
  --c-neutral-soft: oklch(0.951 0.011 80);
  --c-neutral-text: oklch(0.43 0.016 60);

  /* Errors (form validation, error flash) */
  --c-danger: oklch(0.52 0.17 25);
  --c-danger-soft: oklch(0.95 0.025 25);
  --c-danger-text: oklch(0.46 0.16 25);

  /* «Скоро» teasers (honey) */
  --c-soon-bg: oklch(0.94 0.045 88);
  --c-soon-text: oklch(0.42 0.075 70);
  --c-soon-line: oklch(0.74 0.08 80);
  --c-soon-veil-from: oklch(0.994 0.004 80 / 0.35);
  --c-soon-veil-to: oklch(0.994 0.004 80 / 0.8);

  /* Misc */
  --c-focus: oklch(0.5 0.13 235);
  --c-overlay: oklch(0.2 0.02 60 / 0.45);  /* behind <dialog>             */
  --c-header-bg: oklch(0.972 0.009 80 / 0.88);
  --c-video-bg: oklch(0.23 0.012 60);
  --c-video-fg: oklch(0.93 0.008 80);
  --c-video-play: oklch(0.58 0.2 28);
  --c-cover-a: oklch(0.86 0.04 190);       /* fallback cover shapes        */
  --c-cover-b: oklch(0.88 0.045 55);
  --c-cover-c: oklch(0.93 0.03 85);

  /* Shadows — warm, low and soft */
  --shadow-1: 0 1px 2px oklch(0.3 0.03 60 / 0.06), 0 1px 1px oklch(0.3 0.03 60 / 0.04);
  --shadow-2: 0 6px 18px -6px oklch(0.3 0.03 60 / 0.16), 0 2px 4px oklch(0.3 0.03 60 / 0.05);
  --shadow-3: 0 18px 40px -12px oklch(0.3 0.03 60 / 0.24), 0 4px 10px oklch(0.3 0.03 60 / 0.06);
}

/* ---- Dark theme ---------------------------------------------------------- */
/* Same block twice: once for the explicit choice, once for the OS setting. */
[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: oklch(0.205 0.01 60);
  --c-surface: oklch(0.245 0.011 60);
  --c-surface-2: oklch(0.285 0.012 60);
  --c-surface-3: oklch(0.33 0.013 60);
  --c-text: oklch(0.94 0.008 80);
  --c-text-muted: oklch(0.76 0.012 80);
  --c-link: oklch(0.8 0.08 190);
  --c-line: oklch(0.34 0.012 60);
  --c-line-strong: oklch(0.56 0.014 70);
  --c-accent: oklch(0.78 0.08 188);
  --c-accent-hover: oklch(0.84 0.075 188);
  --c-accent-soft: oklch(0.32 0.04 192);
  --c-accent-text: oklch(0.82 0.075 188);
  --c-on-accent: oklch(0.2 0.02 200);
  --c-ok: oklch(0.78 0.11 152);
  --c-ok-hover: oklch(0.84 0.1 152);
  --c-ok-soft: oklch(0.31 0.045 152);
  --c-ok-text: oklch(0.84 0.1 152);
  --c-on-ok: oklch(0.2 0.02 152);
  --c-warn: oklch(0.76 0.11 50);
  --c-warn-hover: oklch(0.82 0.1 50);
  --c-warn-soft: oklch(0.32 0.05 45);
  --c-warn-text: oklch(0.84 0.09 52);
  --c-on-warn: oklch(0.2 0.02 45);
  --c-pending: oklch(0.76 0.08 250);
  --c-pending-soft: oklch(0.31 0.04 250);
  --c-pending-text: oklch(0.84 0.065 250);
  --c-neutral-soft: oklch(0.285 0.012 60);
  --c-neutral-text: oklch(0.8 0.012 80);
  --c-danger: oklch(0.72 0.15 25);
  --c-danger-soft: oklch(0.31 0.06 25);
  --c-danger-text: oklch(0.83 0.11 25);
  --c-soon-bg: oklch(0.33 0.045 85);
  --c-soon-text: oklch(0.88 0.08 88);
  --c-soon-line: oklch(0.55 0.07 85);
  --c-soon-veil-from: oklch(0.245 0.011 60 / 0.35);
  --c-soon-veil-to: oklch(0.245 0.011 60 / 0.82);
  --c-focus: oklch(0.8 0.11 230);
  --c-overlay: oklch(0.1 0.01 60 / 0.6);
  --c-header-bg: oklch(0.205 0.01 60 / 0.88);
  --c-video-bg: oklch(0.15 0.008 60);
  --c-video-fg: oklch(0.93 0.008 80);
  --c-video-play: oklch(0.6 0.2 28);
  --c-cover-a: oklch(0.38 0.045 190);
  --c-cover-b: oklch(0.4 0.06 50);
  --c-cover-c: oklch(0.3 0.025 80);
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-2: 0 6px 18px -6px oklch(0 0 0 / 0.5), 0 2px 4px oklch(0 0 0 / 0.25);
  --shadow-3: 0 18px 40px -12px oklch(0 0 0 / 0.6), 0 4px 10px oklch(0 0 0 / 0.3);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --c-bg: oklch(0.205 0.01 60);
    --c-surface: oklch(0.245 0.011 60);
    --c-surface-2: oklch(0.285 0.012 60);
    --c-surface-3: oklch(0.33 0.013 60);
    --c-text: oklch(0.94 0.008 80);
    --c-text-muted: oklch(0.76 0.012 80);
    --c-link: oklch(0.8 0.08 190);
    --c-line: oklch(0.34 0.012 60);
    --c-line-strong: oklch(0.56 0.014 70);
    --c-accent: oklch(0.78 0.08 188);
    --c-accent-hover: oklch(0.84 0.075 188);
    --c-accent-soft: oklch(0.32 0.04 192);
    --c-accent-text: oklch(0.82 0.075 188);
    --c-on-accent: oklch(0.2 0.02 200);
    --c-ok: oklch(0.78 0.11 152);
    --c-ok-hover: oklch(0.84 0.1 152);
    --c-ok-soft: oklch(0.31 0.045 152);
    --c-ok-text: oklch(0.84 0.1 152);
    --c-on-ok: oklch(0.2 0.02 152);
    --c-warn: oklch(0.76 0.11 50);
    --c-warn-hover: oklch(0.82 0.1 50);
    --c-warn-soft: oklch(0.32 0.05 45);
    --c-warn-text: oklch(0.84 0.09 52);
    --c-on-warn: oklch(0.2 0.02 45);
    --c-pending: oklch(0.76 0.08 250);
    --c-pending-soft: oklch(0.31 0.04 250);
    --c-pending-text: oklch(0.84 0.065 250);
    --c-neutral-soft: oklch(0.285 0.012 60);
    --c-neutral-text: oklch(0.8 0.012 80);
    --c-danger: oklch(0.72 0.15 25);
    --c-danger-soft: oklch(0.31 0.06 25);
    --c-danger-text: oklch(0.83 0.11 25);
    --c-soon-bg: oklch(0.33 0.045 85);
    --c-soon-text: oklch(0.88 0.08 88);
    --c-soon-line: oklch(0.55 0.07 85);
    --c-soon-veil-from: oklch(0.245 0.011 60 / 0.35);
    --c-soon-veil-to: oklch(0.245 0.011 60 / 0.82);
    --c-focus: oklch(0.8 0.11 230);
    --c-overlay: oklch(0.1 0.01 60 / 0.6);
    --c-header-bg: oklch(0.205 0.01 60 / 0.88);
    --c-video-bg: oklch(0.15 0.008 60);
    --c-video-fg: oklch(0.93 0.008 80);
    --c-video-play: oklch(0.6 0.2 28);
    --c-cover-a: oklch(0.38 0.045 190);
    --c-cover-b: oklch(0.4 0.06 50);
    --c-cover-c: oklch(0.3 0.025 80);
    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.3);
    --shadow-2: 0 6px 18px -6px oklch(0 0 0 / 0.5), 0 2px 4px oklch(0 0 0 / 0.25);
    --shadow-3: 0 18px 40px -12px oklch(0 0 0 / 0.6), 0 4px 10px oklch(0 0 0 / 0.3);
  }
}

/* ---- Theme-independent tokens ------------------------------------------- */
:root {
  /* Typography — both families are free (OFL) and cover Cyrillic */
  --font-display: "Lora", "PT Serif", Georgia, serif;
  --font-body: "Golos Text", "PT Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs: 0.8125rem;   /* 13 — chips, eyebrows            */
  --fs-sm: 0.875rem;    /* 14 — meta, hints, badges        */
  --fs-base: 1rem;      /* 16 — UI body                     */
  --fs-read: 1.0625rem; /* 17 — lesson text                 */
  --fs-md: 1.1875rem;   /* 19 — card titles                 */
  --fs-lg: 1.4375rem;   /* 23 — section headings            */
  --fs-xl: 1.8125rem;   /* 29 — page titles (mobile: h1)    */
  --fs-2xl: 2.375rem;   /* 38 — page titles (desktop)       */
  --fs-3xl: 3.25rem;    /* 52 — error codes, entry heading  */

  --lh-tight: 1.2;
  --lh-base: 1.55;
  --lh-read: 1.75;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Spacing — 4px base */
  --s-1: 0.25rem;  /* 4  */
  --s-2: 0.5rem;   /* 8  */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Layout */
  --container: 1200px;
  --reading: 68ch;
  --gutter: 1rem;
  --header-h: 64px;
  --tap: 44px;              /* minimum touch target */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; }
}