/*
 * Design-tokens (fase 7.0) — ÉN kilde til sannhet for farge, rom, radius,
 * skygge og bevegelse. Ingen løse hex-verdier skal finnes i app.css; alt
 * refereres via var(--token) herfra.
 *
 * Materialpalett forankret i Montér-profilen (varm oransje aksent) mot en
 * kjølig betong/stål-nøytral base, med diskret treverk-varme. Én tydelig
 * aksent (oransje); blått er sekundær-signal, ikke dekor.
 */
:root {
    /* -- Primitiver: betong (kjølige, nesten-hvite flater) ------------------ */
    --concrete-25: #fbfcfe;
    --concrete-50: #f8fafc;
    --concrete-75: #f7f9fc;
    --concrete-100: #f6f8fb;
    --concrete-125: #f4f7fb;
    --concrete-150: #f3f6fb;
    --concrete-200: #f1f5f9;
    --concrete-250: #edf2f7;
    --concrete-300: #eef2f7;
    --white: #ffffff;

    /* -- Primitiver: stål (tekst og grå hierarki) -------------------------- */
    --steel-900: #101828;
    --steel-800: #182230;
    --steel-700: #344054;
    --steel-600: #475467;
    --steel-500: #667085;
    --steel-400: #98a2b3;

    /* -- Primitiver: oransje (Montér-aksent / treverk-varme) --------------- */
    --orange-700: #b8420f;
    --orange-600: #b8420f;
    --orange-500: #f26722;
    --orange-400: #ff8a4c;
    --orange-50: #fff1e8;

    /* -- Primitiver: funksjonsfarger --------------------------------------- */
    --blue-600: #1d4ed8;
    --blue-500: #2563eb;
    --blue-50: #eff6ff;
    --green-700: #087252;
    --green-500: #15966f;
    --green-50: #e8f8f2;
    --amber-700: #975a16;
    --amber-600: #b7791f;
    --amber-50: #fff7df;
    --red-700: #b42318;
    --red-500: #d92d20;
    --red-100: #ffe8e6;
    --red-50: #fff1f0;
    --violet-500: #7c3aed;
    --violet-50: #f3eefe;

    /*
     * ===== BYGGEPLASS — godkjent designretning (designpass v3) =============
     * «Arkitektpult i dagslys på byggeplassen». Lyse betong-/papirflater bærer
     * ALL lesetekst; blåkopi som hvisket rutenett-/målestrek-motiv; ÉN dominant
     * signalfarge (sikkerhetsoransje) til handling/hovedprodukt/risiko; signalgul
     * sparsomt; stålblå sekundær/info; grønn = på lager. Referanser+styleboard:
     * docs/design/styleboard.md. Alle verdier her (ingen løse hex i komponenter).
     */
    /* Materialnøytraler — betong/papir (flater + tekst) */
    --concrete-canvas: #F4F2EE;   /* papir/gips — canvas */
    --concrete-panel: #FBFAF8;    /* panel */
    --concrete-card: #FFFFFF;     /* kort */
    --concrete-100: #EFEDE8;
    --concrete-line: #E4E1DA;
    --concrete-line-strong: #D3CFC6;
    --concrete-900: #282B30;      /* tekst primær */
    --concrete-700: #5A6169;      /* tekst sekundær */
    --concrete-500: #8A9099;      /* muted */
    /* Signalfarger (oppmerksomhet — ALDRI dekor) */
    --sig-orange: #EA5B12;        /* sikkerhetsoransje — primærhandling/hovedprodukt */
    --sig-orange-strong: #B8420C;
    --sig-orange-soft: #FBE7DA;
    --sig-orange-ink: #4A1C05;    /* ikon på oransjefylt */
    --sig-yellow: #FFC42B;        /* signalgul — hovedprodukt-markør/varselaksent (sparsom) */
    --sig-yellow-ink: #4A3A00;
    --sig-yellow-soft: #FFF3D6;
    /* Stålblå (sekundærroller/info) */
    --steel-blue: #2F5FA6;
    --steel-blue-800: #1E4478;
    --steel-blue-soft: #E8EFF8;
    /* Treverk (myke detaljer/hover) */
    --wood: #C39A6B;
    --wood-soft: #F3EADC;
    /* Blåkopi-motiv (subtilt rutenett/målestrek) */
    --blueprint-line: rgba(47, 95, 166, 0.09);
    --blueprint-size: 28px;
    /* Status */
    --stock-dot: #5B8A1E;
    --stock-text: #3B6D11;
    --caution: #B54708;
    --caution-soft: #FBE7DC;

    /* Semantiske aliaser → Byggeplass (nøytrale flater/tekst; SIGNAL kun
       eksplisitt i skinet — aldri via --primary, så én dominant signal/skjerm). */
    --bg: var(--concrete-canvas);
    --panel: var(--concrete-panel);
    --panel-solid: var(--concrete-card);
    --text: var(--concrete-900);
    --text-strong: var(--concrete-900);
    --muted: var(--concrete-500);
    --muted-strong: var(--concrete-700);
    --border: var(--concrete-line);
    --border-strong: var(--concrete-line-strong);

    /* -- Semantiske farger (bruk DISSE i komponenter) ---------------------- */
    --bg: var(--concrete-100);
    --bg-soft: var(--concrete-300);
    --panel: rgba(255, 255, 255, 0.96);
    --panel-solid: var(--white);
    --panel-light: var(--concrete-50);

    --border: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.16);
    --border-blueprint: rgba(37, 99, 235, 0.10);

    --text: var(--steel-800);
    --text-strong: var(--steel-900);
    --muted: var(--steel-500);
    --muted-strong: var(--steel-600);

    --primary: var(--orange-500);
    --primary-2: var(--orange-400);
    --primary-strong: var(--orange-700);
    --primary-soft: var(--orange-50);

    --accent: var(--blue-500);
    --accent-strong: var(--blue-600);
    --accent-soft: var(--blue-50);

    --success: var(--green-500);
    --success-strong: var(--green-700);
    --success-soft: var(--green-50);

    --warning: var(--amber-600);
    --warning-strong: var(--amber-700);
    --warning-soft: var(--amber-50);

    --danger: var(--red-500);
    --danger-strong: var(--red-700);
    --danger-soft: var(--red-50);
    --danger-soft-2: var(--red-100);

    --expert: var(--violet-500);
    --expert-soft: var(--violet-50);

    /* -- Rom (spacing-skala, 4px-grunnenhet) ------------------------------- */
    --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;

    /* -- Radius ------------------------------------------------------------ */
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --radius-pill: 999px;

    /* -- Elevasjon (subtil dybde, betong-kjølig skygge) -------------------- */
    --shadow-xl: 0 26px 80px rgba(15, 23, 42, 0.13);
    --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.10);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);
    --shadow-sm: 0 5px 16px rgba(15, 23, 42, 0.06);
    --shadow-xs: 0 2px 8px rgba(15, 23, 42, 0.05);

    /* -- Fokusring --------------------------------------------------------- */
    --focus-ring: 0 0 0 3px rgba(242, 103, 34, 0.28);

    /* -- Typografi --------------------------------------------------------- */
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, monospace;

    /* -- Bevegelse (GPU-vennlig: kun transform/opacity styres av disse) ---- */
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --motion-slow: 300ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* materiell «ankomst» */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-draw: cubic-bezier(0.2, 0.8, 0.2, 1);     /* «linjen tegnes» (Blåkopi §4) */
    --stagger-step: 64ms;                             /* mellomrom kort-for-kort */

    /* -- Presisjonsdetaljer (blueprint-grid, teknisk linjeføring) ---------- */
    --blueprint-size: 22px;
    --hairline: rgba(15, 23, 42, 0.06);

    --z-base: 1;
    --z-sticky: 20;
    --z-banner: 60;
    --z-modal: 100;
    --z-toast: 120;

    /*
     * ===== BLÅKOPI LEVENDE — godkjent designretning (designpass v4) ========
     * Blåkopi-blå er canvas og chrome; ALL lesetekst bor på hvite flater
     * (lesbarhetsvernet er absolutt). v2-Blåkopi-tokens gjenbrukt fra git
     * (76e5b34); v4 legger signalgul (handling/markør), rav (kjøpsenhet i
     * målkjeden) og konfidens-nivåer. Fasit: docs/design/hero/hero-fasit.md.
     * Blokken står SIST i :root så semantiske aliaser vinner kaskaden.
     */
    /* Canvas + teknisk motiv */
    --bp-blue: #0F3DAD;                          /* blåkopi-blå canvas/chrome */
    --bp-grid: rgba(255, 255, 255, 0.11);        /* rutenett, hvite linjer */
    --bp-grid-size: 30px;
    --bp-frame-outer: rgba(255, 255, 255, 0.55); /* arkramme ytre */
    --bp-frame-inner: rgba(255, 255, 255, 0.25); /* arkramme indre */
    /* Lyse flater (bærer all lesetekst) */
    --bp-metallic-1: #FFFFFF;                    /* agent-boble topp */
    --bp-metallic-2: #E9EDF4;                    /* agent-boble bunn */
    --bp-panel: #EEF2F8;
    --bp-card: #FFFFFF;
    --bp-hairline: #D6DEEC;
    --bp-hairline-soft: #E3E8F0;   /* thumb-ramme + konfidens-base (rettepass 4) */
    --bp-line-strong: #C9D4E6;
    /* Blekk (tekst på lyse flater) */
    --bp-ink: #1C2733;
    --bp-blue-50: #EDF2FC;         /* detaljark: chips/skeleton/why-flate */
    --bp-blue-300: #9DB4E8;        /* detaljark: variantpille-ramme, skisse-strek */
    /* Atlas v2 (2026-07-14): snekker-palett — norske tokens, tegneserie-
       stil m/ mørk kontur og myke former (referanse: docs/design/
       atlas_reference_v2.png — stilreferanse, aldri kopi). Signalgult kun
       som diskret merkevare-aksent (brillestropp). */
    --atlas-hud: #F2C6A0;
    --atlas-hud-skygge: #E3AE85;
    --atlas-haar: #6F4C30;
    --atlas-haar-moerk: #59391F;
    --atlas-skjorte: #4479B8;
    --atlas-skjorte-moerk: #3A69A3;
    --atlas-forkle: #8C6547;
    --atlas-forkle-moerk: #74533B;
    --atlas-stropp: #5C4331;
    --atlas-bukse: #A8916A;
    --atlas-stovler: #5B4530;
    --atlas-kontur: #3A2C22;
    --atlas-brille-baand: #6A7686;
    --atlas-brille-glass: #DDE7F4;
    --atlas-aksent: var(--sig-yellow);
    --bp-scrim: rgba(12, 47, 134, 0.45);          /* detaljark-backdrop */
    --bp-sheet-shadow: 0 -12px 40px rgba(12, 47, 134, 0.35);
    --bp-ink-2: #5B6B84;
    --bp-steel: #46536A;
    --bp-blue-800: #0C2F86;                      /* NOBB/etiketter på hvitt */
    --bp-blue-accent: #0F3DAD;
    --bp-primary-fill: #E8EEFB;
    /* På blå canvas (korte etiketter/mono — aldri brødtekst) */
    --bp-on-blue: #FFFFFF;
    --bp-on-blue-muted: #B9CCF5;
    --bp-on-blue-mono: #E3EBFB;
    /* Signalgul (v4, rettepass B2-fasit): avatar-ring, plukkliste-badge,
       «Ny samtale», send-knapp, CTA, markør. KUN disse — gul-regelen. */
    --bp-signal: #FFCC00;
    --bp-signal-ink: #412402;
    --bp-signal-soft: #FFF3D6;
    /* Rav (v4): kjøpsenhet-leddet i målkjeden (AA-tekst på hvitt) */
    --bp-buy: #975A16;
    --bp-buy-soft: #FFF7DF;
    /* Konfidens (v4-produktvalget): streker + lav-tilstand */
    --bp-conf-on: #0F3DAD;
    --bp-conf-dim: #C9D4E6;
    /* Status */
    --bp-stock-dot: #639922;
    --bp-stock-on-white: #2E6B14;
    --bp-stock-on-blue: #9FE1CB;
    --bp-caution: #B54708;
    --bp-caution-soft: #FBE7DC;
    /* Etappeavlesning (header, på blått): fullført grønn / aktiv signalgul */
    --bp-stage-done: #9FE1CB;
    --bp-stage-active: #FFCC00;

    /* Semantiske aliaser → Blåkopi levende (vinner kaskaden; komponentlag
       bruker DISSE + bp-tokens — aldri løse hex). */
    --bg: var(--bp-blue);
    --bg-soft: var(--bp-blue);
    --panel: var(--bp-panel);
    --panel-solid: var(--bp-card);
    --panel-light: var(--bp-panel);
    --text: var(--bp-ink);
    --text-strong: var(--bp-ink);
    --muted: var(--bp-ink-2);
    --muted-strong: var(--bp-steel);
    --border: var(--bp-hairline);
    --border-strong: var(--bp-line-strong);
    --assistant: var(--bp-metallic-1);
    --focus-ring: 0 0 0 3px rgba(255, 196, 43, 0.45); /* signalgul — for blå chrome */
    /* Rettepass 2026-07-14 (brukerutpekt): gul fokusglød rundt komposeren
       leste som gul firkant — på HVITE flater brukes blåkopi-blå ring. */
    --focus-ring-paper: 0 0 0 3px rgba(15, 61, 173, 0.20);
    /* Kube-loaderen i Produktvalg-tomtilstanden (brukerbestilt 2026-07-14):
       isometriske flater i blåkopi-harmoni */
    --kube-topp: #5C8DF6;
    --kube-side: #145AF2;
    --kube-front: #447CF5;
    --kube-spor: #DBE3F4;
}

/*
 * Rolig variant: brukere med prefers-reduced-motion får null bevegelse.
 * Satt her som token-nivå så alle komponenter arver samme «av»-tilstand.
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
        --motion-slow: 0ms;
        --stagger-step: 0ms;
    }
}