/* eco-tokens.css - design tokens of the 1krok.link ecosystem. ONE source, served from
   https://1krok.link/assets/css/eco-tokens.css?v=... and linked (or @imported) by every product.
   Only :root custom properties - no selectors, so linking it changes nothing by itself.
   Values: canon approved 19.10.2026 (eco-design-recon: what most pages already use). */
:root {
    /* colours */
    --c-text: #1a1a2e;
    --c-text-2: #4a5568;               /* paragraphs, subtitles, descriptions (as agent, 16.10) */
    --c-muted: #6b7280;                /* small captions and labels only */
    --c-accent: #0055FF;
    --c-accent-dark: #0044CC;          /* hover of the accent (already used by nav, studio, idea) */
    --c-accent-soft: #E7EFFF;
    --c-accent-hover-soft: #F0F7FF;    /* hover of soft items (nav links) */
    --c-border: rgba(0, 85, 255, .1);
    --c-border-strong: rgba(0, 85, 255, .18);
    --c-bg: #ffffff;
    --c-footer: #0a0a1a;

    /* type */
    --font-body: 'Inter', system-ui, sans-serif;
    --font-head: 'Unbounded', sans-serif;
    --fw-head: 700;
    --fs-body: 16px;
    --lh-body: 1.6;
    --fs-h1-hero: clamp(32px, 5vw, 56px);     /* 56 at 1440, 32 at 360 */
    --fs-h1-doc: clamp(24px, 3vw, 32px);      /* documents: legal, 404, thank-you */
    --fs-h2: clamp(28px, 4vw, 42px);
    --fs-h3: clamp(19px, 2.2vw, 24px);

    /* shape */
    --r: 12px;
    --r-pill: 999px;
    --shadow: 0 15px 50px rgba(0, 85, 255, .15);
    --shadow-accent: 0 8px 24px rgba(0, 85, 255, .24);

    /* layout */
    --container: 1200px;
    --section-y: 100px;                /* >= 769px */
    --section-y-mobile: 60px;          /* <= 768px */
    /* breakpoints (media queries cannot read variables - use these numbers):
       max-width 640px (phone), 768px (tablet), 968px (nav collapses to burger) */

    /* components */
    --btn-h: 52px;                     /* primary button height (16px text, 1.2 line, 12px padding) */
    --btn-fs: 16px;
    --btn-fw: 600;
    --field-h: 53px;
    --field-border: 2px;
    --header-bg: rgba(255, 255, 255, .95);
    --header-blur: blur(20px);
}