/* Layer order for the whole site (D-010). Values from docs/DESIGN.md; brand colours from the logo (D-031). */
@layer tokens, base, components, pages;

@layer tokens {
  :root {
    --red: #dd2326;
    --red-hover: #c41c1f;
    --red-soft: #fdecec;
    --ink: #171716;
    --text: #191c21;
    --text-2: #3e4047;
    --muted: #85878b;
    --muted-2: #94999e;
    --muted-3: #a2a4a9;
    --bg: #f6f8fa;
    --bg-hero: #f9f9f9;
    --surface: #ffffff;
    --surface-2: #eff3f4;
    --badge-dark: #35373b;
    --badge-light: #e0e2e6;
    --border: #eceff3;
    --shadow-card: 0 1px 2px rgb(23 23 22 / 4%), 0 6px 18px rgb(23 23 22 / 6%);
    --shadow-card-hover: 0 2px 4px rgb(23 23 22 / 6%), 0 12px 28px rgb(23 23 22 / 10%);

    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-pill: 999px;

    --container-max: 1000px; /* mockup frame; floor for laptops */
    --container-share: 68%; /* share of the viewport on wide screens (D-036) */
    --gutter: 16px;
    --tabbar-h: 64px;

    --font: "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-xs: 0.75rem;
    --fs-s: 0.8125rem;
    --fs-m: 0.9375rem;
    --fs-l: 1.125rem;
    --fs-xl: 1.5rem;
    --fs-hero: clamp(2rem, 4.2vw, 3rem);
  }
}