/* ============================================================
   Skog & Stål — DESIGN TOKENS (single source of truth)
   ------------------------------------------------------------
   RULE: No file should ever use a raw hex/rgb color.
   Always reference a var(--token) defined here.
   Mirror of design-system.md — keep both in sync.
   ============================================================ */

:root {
    /* ===== Brand — Forest (green / Trädfällning) ===== */
    --color-forest: #047857;
    --color-forest-light: #059669;
    --color-forest-dark: #064e3b;
    --color-forest-tint: rgba(4, 120, 87, 0.08);
    --color-forest-tint-strong: rgba(4, 120, 87, 0.15);
    --color-forest-glow: rgba(16, 185, 129, 0.4);

    /* ===== Brand — Welding (amber / Svetsning) ===== */
    --color-welding: #c2410c;
    --color-welding-light: #ea580c;
    --color-welding-dark: #7c2d12;
    --color-welding-tint: rgba(194, 65, 12, 0.08);
    --color-welding-tint-strong: rgba(194, 65, 12, 0.15);
    --color-welding-glow: rgba(245, 158, 11, 0.4);

    /* ===== Neutrals / Surfaces ===== */
    --color-bg: #f8fafc;
    --color-bg-alt: #f1f5f9;
    --color-surface: #ffffff;
    --color-surface-glass: rgba(255, 255, 255, 0.7);
    --color-surface-glass-strong: rgba(255, 255, 255, 0.85);
    --color-surface-glass-soft: rgba(255, 255, 255, 0.6);
    --color-surface-overlay: rgba(255, 255, 255, 0.96);
    --color-ink: #0f172a;
    --color-white: #ffffff;

    /* ===== Text ===== */
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-text-on-dark: #f1f5f9;
    --color-text-on-dark-muted: #94a3b8;

    /* ===== Borders / hairlines ===== */
    --color-border: rgba(15, 23, 42, 0.08);
    --color-border-strong: rgba(15, 23, 42, 0.12);
    --color-border-faint: rgba(15, 23, 42, 0.04);
    --color-border-on-dark: rgba(255, 255, 255, 0.08);
    --color-border-on-dark-strong: rgba(255, 255, 255, 0.15);

    /* ===== Functional accent (icons) ===== */
    --color-success: #10b981;
    --color-amber: #f59e0b;

    /* ===== Overlays / interaction tints ===== */
    --color-ink-005: rgba(15, 23, 42, 0.05);
    --color-ink-002: rgba(15, 23, 42, 0.02);
    --color-on-dark-003: rgba(255, 255, 255, 0.03);
    --color-on-dark-008: rgba(255, 255, 255, 0.08);
    --color-scrim: rgba(0, 0, 0, 0.7);
    --color-scrim-soft: rgba(0, 0, 0, 0.3);
    --color-scrim-strong: rgba(0, 0, 0, 0.5);

    /* ===== Badge tints (brand-pastel) ===== */
    --color-forest-badge-bg: rgba(45, 106, 79, 0.2);
    --color-forest-badge-border: rgba(45, 106, 79, 0.4);
    --color-welding-badge-bg: rgba(243, 91, 4, 0.2);
    --color-welding-badge-border: rgba(243, 91, 4, 0.4);

    /* ===== Hero pane gradient overlays ===== */
    --overlay-forest: linear-gradient(135deg, rgba(236, 253, 245, 0.85), rgba(240, 253, 250, 0.75));
    --overlay-welding: linear-gradient(135deg, rgba(254, 243, 199, 0.85), rgba(255, 247, 237, 0.75));

    /* ===== Form controls ===== */
    --color-input-bg: #ffffff;
    --color-switch-track: #e2e8f0;

    /* ===== Typography ===== */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Fluid type scale (clamp = mobile→desktop) */
    --fs-display: clamp(2.4rem, 5vw, 3.5rem);
    --fs-h1: clamp(2rem, 4.5vw, 3rem);
    --fs-h2: clamp(1.8rem, 3.5vw, 2.5rem);
    --fs-h3: clamp(1.4rem, 2.5vw, 2rem);
    --fs-h4: 1.1rem;
    --fs-lead: 1.1rem;
    --fs-body: 1rem;
    --fs-sm: 0.95rem;
    --fs-xs: 0.85rem;
    --fs-2xs: 0.8rem;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    --lh-tight: 1.1;
    --lh-snug: 1.4;
    --lh-base: 1.6;

    /* ===== Spacing scale (4px base) ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-15: 60px;
    --space-16: 64px;
    --space-20: 80px;
    --space-25: 100px;

    /* ===== Radius ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 50px;
    --radius-round: 50%;

    /* ===== Shadows ===== */
    --shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.02);
    --shadow-sm: 0 4px 15px rgba(15, 23, 42, 0.15);
    --shadow-md: 0 8px 25px rgba(15, 23, 42, 0.2);
    --shadow-lg: 0 15px 40px rgba(15, 23, 42, 0.08);
    --shadow-nav: 0 4px 30px rgba(15, 23, 42, 0.04);
    --shadow-handle: 0 4px 15px rgba(0, 0, 0, 0.3);

    /* ===== Layout ===== */
    --container: 1200px;
    --section-pad-y: 100px;
    --section-pad-x: 20px;

    /* ===== Motion ===== */
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);

    /* ===== Z-index scale ===== */
    --z-header: 1000;
    --z-mobile-menu: 999;
    --z-trust: 10;
}