/* base: design tokens. Every colour comes from three base colours (docs/content.md «Скелет, палитра
   и превью оформления»): --c-primary, --c-accent, --c-surface, plus --c-on-primary / --c-on-accent
   (black or white). The core puts the organisation's palette into <style>:root{…}</style> after this
   file; the values below are the fallback (palette "ertis") for a core that does not send it.
   A child template keeps this file and adds its own rules in another stylesheet.

   Derivation (color-mix in oklab), built so text keeps AA for any palette the core accepts with a
   page background of at least 7:1 against black; checked over 40 000 random palettes:
   - text, muted text and headings are darkened mixes that get darker as the background does;
   - links are the primary pushed 14% towards black (primary itself already has 4.5 on the page);
   - the tinted band (surface-2) is the background moved towards a light primary tint, so it never
     ends up much darker than the page;
   - dark areas (hero, footer) are the primary pushed towards black; text on them is white or a
     light primary tint (a hero photo is never under text: it sits beside or above the dark panel); accent text on them is lifted to oklch lightness .84 where supported;
   - filled primary/accent areas use the on-colour from the core. */
:root {
  --c-primary: #1d4f91;
  --c-accent: #e8a82e;
  --c-surface: #f8f6f1;
  --c-on-primary: #fff;
  --c-on-accent: #000;

  /* colour, step 1: browsers without color-mix() get the base colours as they are and neutral tints */
  --color-bg: var(--c-surface);
  --color-surface: #fff;
  --color-surface-2: #eeeeec;
  --color-text: #16191d;
  --color-text-muted: #4b5057;
  --color-heading: #16191d;
  --color-border: #d8d8d5;
  --color-border-strong: #686c72;
  --color-link: var(--c-primary);
  --color-link-hover: #16191d;
  --color-primary: var(--c-primary);
  --color-on-primary: var(--c-on-primary);
  --color-primary-hover: #16191d;
  --color-primary-soft: #eeeeec;
  --color-primary-strong: #1b2027;
  --color-on-dark: #fff;
  --color-on-dark-muted: #c9ced6;
  --color-accent: var(--c-accent);
  --color-on-accent: var(--c-on-accent);
  --color-accent-soft: #f3f1ec;
  --color-accent-on-dark: #fff;
  --color-ornament: var(--c-accent);
  --color-focus: var(--c-primary);
  --color-focus-on-dark: #fff;
  --color-footer-bg: #1b2027;
  --color-footer-text: #eceef1;
  --color-footer-muted: #b4bac3;
  --hero-shade: #11161c;
  /* file badges keep fixed colours (white text, 6.0 to 7.2) whatever the palette */
  --color-file-pdf: #b3261e;
  --color-file-doc: #1f5bb5;
  --color-file-xls: #17693f;
  --color-file-ppt: #a8430a;
  --color-file-other: #4f5868;

  /* type: system fonts only (Segoe UI, Roboto, Noto Sans and SF cover Kazakh letters) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --text-xs: clamp(.8125rem, .79rem + .1vw, .86rem);
  --text-sm: clamp(.875rem, .85rem + .12vw, .94rem);
  --text-base: clamp(1rem, .96rem + .2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + .38vw, 1.32rem);
  --text-xl: clamp(1.35rem, 1.18rem + .8vw, 1.9rem);
  --text-2xl: clamp(1.7rem, 1.38rem + 1.6vw, 2.75rem);
  --text-hero: clamp(2rem, 1.4rem + 3vw, 4.1rem);
  --leading-body: 1.6;
  --leading-tight: 1.18;
  --weight-heading: 750;
  --tracking-heading: -.012em;

  /* space */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: clamp(1.25rem, 1.1rem + .7vw, 1.75rem);
  --space-6: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --space-7: clamp(3rem, 2rem + 4.5vw, 5.75rem);
  --gutter: clamp(1rem, .4rem + 2.8vw, 3rem);

  /* layout */
  --page-max: 90rem;
  --measure: 44rem;
  --measure-wide: 64rem;

  /* shape */
  --radius-sm: .375rem;
  --radius: .75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(16 24 36 / .06), 0 1px 3px rgb(16 24 36 / .08);
  --shadow-md: 0 2px 4px rgb(16 24 36 / .05), 0 12px 28px -10px rgb(16 24 36 / .22);
  --shadow-lg: 0 24px 48px -18px rgb(16 24 36 / .35);
  --focus-width: 3px;
}

/* colour, step 2: everything derived from the base colours */
@supports (color: color-mix(in oklab, red, blue)) {
  :root {
    --color-surface: color-mix(in oklab, var(--c-surface) 30%, #fff);
    --color-tint: color-mix(in oklab, var(--c-primary) 22%, #fff);
    --color-surface-2: color-mix(in oklab, var(--c-surface) 72%, var(--color-tint));
    --color-text: color-mix(in oklab, color-mix(in oklab, var(--c-primary) 50%, var(--c-surface)) 30%, #000);
    --color-text-muted: color-mix(in oklab, color-mix(in oklab, var(--c-primary) 25%, var(--c-surface)) 52%, #000);
    --color-heading: color-mix(in oklab, var(--c-primary) 60%, #000);
    --color-border: color-mix(in oklab, var(--c-surface) 85%, var(--color-text));
    --color-border-strong: color-mix(in oklab, var(--c-surface) 40%, var(--color-text));
    --color-link: color-mix(in oklab, var(--c-primary) 86%, #000);
    --color-link-hover: color-mix(in oklab, var(--c-primary) 62%, #000);
    --color-primary-hover: color-mix(in oklab, var(--c-primary) 70%, #000);
    --color-primary-soft: color-mix(in oklab, var(--c-primary) 9%, #fff);
    --color-primary-strong: color-mix(in oklab, var(--c-primary) 60%, #000);
    --color-on-dark-muted: color-mix(in oklab, var(--c-primary) 22%, #fff);
    --color-accent-soft: color-mix(in oklab, var(--c-accent) 20%, #fff);
    --color-accent-on-dark: color-mix(in oklab, var(--c-accent) 25%, #fff);
    --color-focus: var(--color-link);
    --color-focus-on-dark: color-mix(in oklab, var(--c-accent) 35%, #fff);
    --color-footer-bg: color-mix(in oklab, var(--c-primary) 50%, #000);
    --color-footer-text: color-mix(in oklab, var(--c-primary) 8%, #fff);
    --color-footer-muted: color-mix(in oklab, var(--c-primary) 30%, #fff);
    --hero-shade: color-mix(in oklab, var(--c-primary) 48%, #000);
    --shadow-sm: 0 1px 2px color-mix(in srgb, var(--hero-shade) 6%, transparent), 0 1px 3px color-mix(in srgb, var(--hero-shade) 8%, transparent);
    --shadow-md: 0 2px 4px color-mix(in srgb, var(--hero-shade) 5%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--hero-shade) 22%, transparent);
    --shadow-lg: 0 24px 48px -18px color-mix(in srgb, var(--hero-shade) 35%, transparent);
  }
}

/* colour, step 3: accent text on dark areas keeps the accent's hue and gets enough lightness */
@supports (color: oklch(from red max(l, .5) c h)) {
  :root {
    --color-accent-on-dark: oklch(from var(--c-accent) max(l, .84) c h);
    --color-focus-on-dark: oklch(from var(--c-accent) max(l, .86) c h);
  }
}