/*
  Design tokens for the KazATU website.

  Color values below were extracted directly from the live site
  (https://kazatu.edu.kz/ru), its stylesheets (/css/style.css, /css/menu.css)
  and the official logo (/img/logo_official.svg) on 2026-07-16.
  Source references are noted per token. Nothing here is invented.

  Structural tokens (spacing scale, radius scale, breakpoints) follow the
  generic 4px-grid principle described in DESIGN.md, but values, the type
  scale and the corner-radius direction are the university's own — DESIGN.md's
  IBM/Carbon color palette, logo, weight-300 display type and flat 0px
  corners are intentionally NOT reused, per project rules.
*/

:root {
  /* ---- Brand: primary green (found: header/footer/nav bg, .green_btn, logo fill) ---- */
  --color-primary: #014530;
  --color-primary-dark: #003e2a;      /* found: header top bg */
  --color-primary-darker: #013821;    /* found: search-input text color on gold */
  --color-primary-hover: #016547;     /* found: .social-network:hover bg */
  --color-primary-tonal: #0b352d;     /* found: alt dark-green surface */
  --color-on-primary: #ffffff;

  /* ---- Brand: gold / amber accent (found: buttons, highlights, logo, search box) ---- */
  --color-accent: #d89f14;            /* found: most-used accent (buttons, links, highlights) */
  --color-accent-hover: #daa523;      /* found: accent hover/pressed variant */
  --color-accent-logo: #dda708;       /* found: exact logo mark + search box gold */
  --color-on-accent: #013821;

  /* ---- Neutrals ---- */
  --color-ink: #333333;               /* found: body text color, 28 occurrences */
  --color-ink-muted: #5c5c5c;         /* derived: rgba(51,51,51,0.8) flattened on white */
  --color-ink-subtle: #818181;        /* found */
  --color-canvas: #ffffff;
  --color-surface-1: #f3f3f3;         /* found */
  --color-surface-2: #ececec;         /* found */
  --color-surface-3: #f0f0f0;         /* found */
  --color-border: #cccccc;            /* found */
  --color-border-strong: #333333;

  /* ---- Semantic ---- */
  --color-success: #016547;           /* found (green hover variant), AA on white */
  --color-warning: #fadf12;           /* found: burger icon accent */
  --color-warning-ink: #4a3c00;       /* derived: dark ink for text on warning-yellow bg */
  --color-error: #891213;             /* found */
  --color-info: #29348e;              /* found */

  /* Focus ring: gold reads clearly on both white content and the dark-green sidebar */
  --color-focus-ring: #d89f14;

  /* ---- Typography ----
     Real site uses 'Museo Sans Cyrl' (commercial, not redistributable) for
     headings and 'Roboto' for body, with a 'Montserrat' reference elsewhere.
     We substitute the unlicensed display face with Montserrat (free, strong
     Cyrillic + Latin support) and keep Roboto for body, loaded from Google
     Fonts with a full system-font fallback stack so the site still renders
     correctly offline. */
  --font-body: 'Roboto', 'Segoe UI', Arial, sans-serif;
  --font-heading: 'Montserrat', 'Roboto', 'Segoe UI', Arial, sans-serif;

  --text-display-xl: 700 48px/1.15 var(--font-heading);
  --text-display-lg: 700 36px/1.2 var(--font-heading);
  --text-display-md: 700 28px/1.25 var(--font-heading);
  --text-headline: 700 24px/1.3 var(--font-heading);
  --text-title: 600 20px/1.35 var(--font-heading);
  --text-subhead: 500 18px/1.4 var(--font-heading);
  --text-body-lg: 400 17px/1.6 var(--font-body);
  --text-body: 400 16px/1.6 var(--font-body);
  --text-body-sm: 400 14px/1.5 var(--font-body);
  --text-caption: 400 12px/1.4 var(--font-body);
  --text-button: 600 15px/1.3 var(--font-body);
  --text-eyebrow: 600 13px/1.3 var(--font-body);
  --tracking-eyebrow: 0.04em;

  /* ---- Spacing (4px grid) ---- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ---- Radius (deliberately rounded — distinct from Carbon's flat 0px identity) ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, brand-tinted shadows) ---- */
  --shadow-sm: 0 1px 2px rgba(1, 69, 48, 0.08);
  --shadow-md: 0 4px 12px rgba(1, 69, 48, 0.1);
  --shadow-lg: 0 12px 32px rgba(1, 69, 48, 0.14);

  /* ---- Layout ---- */
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 92px;
  --container-max: 1280px;
  --touch-target-min: 44px;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 320ms ease;

  /* ---- Z-index scale ---- */
  --z-topbar: 80;
  --z-overlay: 90;
  --z-sidebar: 100;
  --z-dropdown: 70;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}