/**
 * MotoForma Design Tokens — "Asfalt" 2027
 * Single source of truth for all design values.
 *
 * Identity: monochrome badge logo (black line art) + signal red.
 * The system is built on three surfaces — Paper, Bone and Ink —
 * with red used sparingly as the accent that carries the brand.
 *
 * Legacy --mf-* aliases are kept at the bottom so older page styles
 * inherit the new palette automatically.
 * ============================================
 */

:root {
    /* ========================================
       Brand — signal red
       ======================================== */
    --brand: #ce0000;
    --brand-bright: #ec1414;   /* hover, accents on dark */
    --brand-deep: #9b0000;
    --brand-ink: #5a0000;
    --brand-tint: rgba(206, 0, 0, 0.08);
    --brand-tint-2: rgba(206, 0, 0, 0.16);
    --brand-glow: rgba(206, 0, 0, 0.35);

    /* ========================================
       Ink — dark surfaces (asphalt)
       ======================================== */
    --ink-950: #08090a;
    --ink-900: #0d0f11;
    --ink-850: #121417;
    --ink-800: #181b1f;
    --ink-700: #22262b;
    --ink-600: #2f343b;
    --ink-500: #454b54;

    /* ========================================
       Paper — light surfaces
       ======================================== */
    --paper: #ffffff;
    --bone: #f6f5f2;
    --bone-2: #edebe5;
    --bone-3: #e4e1d9;
    --line: #e5e2db;
    --line-strong: #d2cec4;

    /* ========================================
       Text
       ======================================== */
    --text: #101215;
    --text-2: #4f565f;
    --text-3: #626a74;
    --text-strong: var(--ink-700);   /* silný sekundární text */

    --on-dark: #ffffff;
    --on-dark-2: rgba(255, 255, 255, 0.74);
    --on-dark-3: rgba(255, 255, 255, 0.5);
    --hairline: rgba(255, 255, 255, 0.12);
    --hairline-2: rgba(255, 255, 255, 0.06);

    /* ========================================
       Status
       ======================================== */
    --ok: #0f764f;
    --ok-bright: #12855a;
    --ok-tint: #e6f5ee;
    --warn: #8f5808;
    --warn-tint: #fdf3e2;
    --warn-deep: #6f4306;      /* hover */
    --danger: #c62222;
    --danger-tint: #fdeceb;
    --info: #1a5fb4;
    --info-tint: #e8f0fb;

    /* ========================================
       Typography
       ======================================== */
    --font-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

    /* Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Fluid type scale (Utopia-style, 320px → 1440px viewport) */
    --step--2: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
    --step--1: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);
    --step-0:  clamp(1rem, 0.98rem + 0.11vw, 1.0625rem);
    --step-1:  clamp(1.0625rem, 1.02rem + 0.23vw, 1.25rem);
    --step-2:  clamp(1.25rem, 1.16rem + 0.45vw, 1.625rem);
    --step-3:  clamp(1.5rem, 1.32rem + 0.89vw, 2.25rem);
    --step-4:  clamp(1.875rem, 1.55rem + 1.61vw, 3.25rem);
    --step-5:  clamp(2.25rem, 1.61rem + 3.21vw, 4.75rem);
    --step-6:  clamp(2.75rem, 1.5rem + 6.25vw, 8rem);

    /* Line heights */
    --leading-none: 1;
    /* 0.94 bylo pro verzalky s ceskou diakritikou moc tesne -
       hacky a carky z dalsiho radku lezly na predchozi. */
    --leading-display: 1.06;
    --leading-tight: 1.08;
    --leading-snug: 1.28;
    --leading-normal: 1.45;
    --leading-relaxed: 1.65;
    --leading-loose: 1.8;

    /* Tracking */
    --track-display: -0.035em;
    --track-tight: -0.02em;
    --track-normal: 0;
    --track-wide: 0.06em;
    --track-eyebrow: 0.18em;

    /* ========================================
       Space — fluid rhythm
       ======================================== */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    --section-y: clamp(4rem, 7vw, 7.5rem);
    --section-y-sm: clamp(2.75rem, 4.5vw, 4.5rem);
    --section-y-lg: clamp(5rem, 9vw, 10rem);

    /* ========================================
       Layout
       ======================================== */
    --container: 1280px;
    --container-wide: 1480px;
    --container-narrow: 780px;
    --container-text: 68ch;
    --gutter: clamp(1.125rem, 4vw, 2.5rem);
    --header-h: 76px;

    /* ========================================
       Radii
       ======================================== */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 36px;
    --r-pill: 999px;
    --r-circle: 50%;

    /* ========================================
       Elevation — soft, directional
       ======================================== */
    --shadow-xs: 0 1px 2px rgba(10, 12, 15, 0.05);
    --shadow-sm: 0 2px 10px -3px rgba(10, 12, 15, 0.10);
    --shadow-md: 0 12px 32px -14px rgba(10, 12, 15, 0.22);
    --shadow-lg: 0 26px 64px -22px rgba(10, 12, 15, 0.3);
    --shadow-xl: 0 44px 96px -34px rgba(10, 12, 15, 0.4);
    /* Cervene tlacitko nese vahu barvou, ne barevnou zari pod sebou. */
    --shadow-brand: 0 10px 24px -12px rgba(10, 12, 15, 0.35);
    --shadow-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* Focus ring — never red (red reads as an error state) */
    --focus-ring: 0 0 0 3px rgba(16, 18, 21, 0.16);
    --focus-ring-dark: 0 0 0 3px rgba(255, 255, 255, 0.4);

    /* ========================================
       Motion
       ======================================== */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 0.16s var(--ease);
    --t: 0.3s var(--ease);
    --t-slow: 0.6s var(--ease-out);

    /* ========================================
       Z-Index Scale
       ======================================== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 800;
    --z-modal: 1000;
    --z-tooltip: 5000;
    --z-skip-link: 10000;

    /* ========================================
       Decorative — asphalt grain
       ======================================== */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");


    /* ========================================
       LEGACY ALIASES
       Older page-level styles still reference --mf-*.
       Re-pointed at the new palette so they inherit the facelift.
       ======================================== */
    --mf-red: var(--brand);
    --mf-red-dark: var(--brand-deep);
    --mf-red-darker: var(--brand-ink);
    --mf-red-light: var(--brand-tint);

    --mf-gold: #e8b021;
    --mf-blue: var(--info);
    --mf-blue-dark: #164c8f;
    --mf-green: var(--ok);
    --mf-green-dark: #0d6b48;

    --mf-white: var(--paper);
    --mf-black: var(--ink-950);

    --mf-dark: var(--ink-900);
    --mf-gray-900: var(--text);
    --mf-gray-800: var(--ink-800);
    --mf-gray-700: var(--ink-700);
    --mf-gray-600: var(--text-2);
    --mf-gray-500: var(--text-2);
    --mf-gray-400: var(--text-3);
    --mf-gray-300: var(--line-strong);
    --mf-gray-200: var(--line-strong);
    --mf-gray-100: var(--line);
    --mf-gray-50: var(--bone-2);

    --mf-light: var(--bone);
    --mf-lighter: var(--bone-2);
    --mf-surface-hover: var(--bone);
    --mf-surface-subtle: var(--bone);

    --mf-border: var(--line);
    --mf-border-dark: var(--line-strong);

    --mf-danger: var(--danger);
    --mf-danger-dark: #a01a1a;
    --mf-danger-light: var(--danger-tint);
    --mf-danger-bg: var(--danger-tint);

    --mf-secondary: var(--text-2);
    --mf-secondary-dark: var(--text);

    --mf-orange: var(--warn);
    --mf-purple: #6b4bb5;

    --mf-badge-blue: var(--info);
    --mf-badge-green: var(--ok);

    --mf-success-light: var(--ok-tint);
    --mf-success-dark: #0d6b48;
    --mf-warning-light: var(--warn-tint);
    --mf-warning-dark: #7a4c06;
    --mf-info-light: var(--info-tint);
    --mf-info-dark: #124a8f;
    --mf-danger-light-bg: var(--danger-tint);
    --mf-danger-dark-text: #8f1919;

    --mf-star: #e8a020;

    --mf-input-border: var(--line-strong);
    --mf-placeholder: var(--text-3);
    --mf-error-bg: var(--danger-tint);

    --font-primary: var(--font-body);

    --text-sm: var(--step--1);
    --text-base: var(--step-0);
    --text-md: var(--step-1);
    --text-lg: var(--step-2);
    --text-xl: var(--step-3);
    --text-2xl: var(--step-3);
    --text-3xl: var(--step-4);
    --text-4xl: var(--step-5);

    --spacing-xs: var(--space-3xs);
    --spacing-sm: var(--space-2xs);
    --spacing-md: var(--space-xs);
    --spacing-lg: var(--space-s);
    --spacing-xl: var(--space-m);
    --spacing-2xl: var(--space-xl);
    --spacing-3xl: var(--space-2xl);

    --section-padding: var(--section-y);
    --section-padding-tablet: var(--section-y);
    --section-padding-mobile: var(--section-y);

    --shadow-hover: var(--shadow-lg);
    --shadow-red: var(--shadow-brand);
    --shadow-section-inset: none;
    --focus-ring-error: var(--focus-ring);

    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
    --radius-full: var(--r-circle);
    --radius-pill: var(--r-pill);

    --transition-fast: var(--t-fast);
    --transition-normal: var(--t);
    --transition-slow: var(--t-slow);
}