/*
 * Design tokens for the public pages (landing, course pages, legal pages) and
 * the React app, which loads this same file at runtime from /static/public/.
 * base.css and page styles must use only these variables, never raw values.
 * Only ever ADD tokens: renaming or removing one breaks the React build that is
 * already deployed (it is not rebuilt when this file changes).
 */
:root {
  /* Colors */
  --color-ink: #14161F;        /* text, dark surfaces */
  --color-ground: #FFFFFF;     /* page background */
  --color-soft: #F3F5FF;       /* tinted sections, cards */
  --color-line: #E3E6F0;       /* borders, dividers */
  --color-muted: #4B5165;      /* secondary text */
  --color-accent: #2340D6;     /* links, primary buttons */
  --color-highlight: #FFD23F;  /* marker highlights, badges */

  /* Code card (dark editor). Contrast on --color-ink: text 14.8:1, highlight
     12.5:1, accent-on-dark 7.5:1, code-muted 7.6:1, success 10.4:1.
     Plain --color-accent is only 2.4:1 on dark, hence the lighter tint. */
  --color-code-bar: #1E2130;        /* editor title bar */
  --color-code-text: #E6E8F2;       /* default code text */
  --color-accent-on-dark: #8EA2FF;  /* cobalt tint for function names */
  --color-code-muted: #A0A8C0;      /* strings, comments, output label */
  --color-success: #4ADE80;         /* "tests passed" */

  /* Status colours on light surfaces (app: answers, errors, notices). Contrast:
     text on white / on its own tint. --color-highlight (yellow) is for
     backgrounds only, never for text on white (1.4:1). */
  --color-danger: #B42318;          /* 6.6:1 / 6.1:1 */
  --color-danger-soft: #FEF3F2;
  --color-success-on-light: #067647; /* 5.7:1 / 5.4:1 */
  --color-success-soft: #ECFDF3;
  --color-warning: #B54708;         /* 5.4:1 / 5.2:1 */
  --color-warning-soft: #FFFAEB;

  /* Fonts (see fonts.css for @font-face) */
  --font-heading: "Unbounded", system-ui, sans-serif;
  --font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code: "JetBrains Mono", Consolas, "Courier New", monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;

  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* The all-caps wordmark (site logo, React app header): opened-up letters. */
  --tracking-logo: 0.08em;

  /* 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: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radii */
  --radius-pill: 999px;        /* buttons, pills */
  --radius-card: 20px;         /* cards */
  --radius-small: 10px;        /* inputs, menus, dense app panels */

  /* Shadows (tinted with --color-ink) */
  --shadow-sm: 0 1px 3px rgba(20, 22, 31, 0.08);
  --shadow-md: 0 4px 16px rgba(20, 22, 31, 0.12);
  --shadow-lg: 0 8px 32px rgba(20, 22, 31, 0.16);

  /* Focus ring: cobalt, 7.6:1 against white (yellow would be 1.4:1). The landing
     keeps its wider var(--space-1) outline; the app uses the width below. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-accent);

  /* Stacking order (app) */
  --z-floating: 1000;          /* "next task" and chat buttons */
  --z-chat: 1010;              /* open chat panel */
  --z-header: 1100;            /* sticky app header */
  --z-badge: 1200;             /* user badge dropdown */

  /* Layout */
  --container-width: 72rem;
  --reading-width: 50rem;        /* app: lesson column (text + code editors, test tables) */
  --form-width: 26rem;           /* app: login / register card */
  --panel-width: 26rem;          /* app: side panel (lesson viewer's "Список уроков") */
  --card-min-width: 18rem;       /* app: smallest card in a responsive grid */
  --measure: 68ch;               /* comfortable line length for long text */
  --border-width: 1px;
}