/**
 * Design tokens (ADR 0024) -- the app's :root custom-property palette
 * (PEITHO look: paper, ink, one pen-blue accent). Every other stylesheet
 * in this app references these via var(...); this file must load BEFORE
 * any of them, in both frontend/index.html and
 * frontend/public/plan-share/plan-share.html
 * (the only two pages that pull in the rest of styles.css).
 */
:root {
    /* ===== PEITHO look — a cold Nordic dictionary: paper, ink, one pen-blue accent.
       Token NAMES are unchanged (the app references them everywhere); only the
       VALUES changed, plus a few additions (--ink-*, --field-bg, --paper-tint,
       --font-mono, --radius-*, --shadow-btn). Re-skin, not a re-architecture. ===== */

    /* Brand neutrals — paper & ink (was chocolate/cream) */
    --color-chocolate: #171c21;
    --color-chocolate-light: #2a323a;
    --color-cream: #f4f5f3;
    --color-cream-dark: #eceeec;

    /* Primary — pen-blue (the ONE accent: also links, active, emphasis, data) */
    --primary-color: #23405f;
    --primary-hover: #1a314a;
    /* Bleg pen-blå. Stod som `var(--primary-light)` — en custom property defineret som sig
       selv, hvilket efter CSS-specifikationen er invalid at computed-value time: den
       resolvede til INTET, og alle 112 forbrug (bl.a. .status-kontaktet/.status-booket)
       faldt tilbage til unset. Værdien er tonet som --success-light er det mod
       --success-color: baggrund til --primary-color's skrift. */
    --primary-light: #e6ebf1;
    --primary-dark: #171c21;
    --secondary-color: #444d56;

    /* Semantic — muted, used sparingly. Green = verified/OK only. */
    --success-color: #2e5940;
    --success-light: #e6efe8;
    /* Advarsel — dæmpet okker. Den delte #8c4a3f/#f2e7e4 med danger, altså PRÆCIS samme
       farve: en "kan ikke testes"-advarsel og en "fejlet" var ikke til at skelne. Det er
       den samme løgn, integrations-truth.test.js blev skrevet for at fange, bare flyttet
       ned i tokens. Okkeren er den dæmpede efterfølger til den gamle #fef08a — gul nok til
       at læses som advarsel (og til testens isYellow), dæmpet nok til paletten.
       Kontrast 5.61:1 mod --warning-light (AA), på linje med success (6.83) og danger (5.47). */
    --warning-color: #745a1c;
    --warning-light: #f6efc4;
    --danger-color: #8c4a3f;
    --danger-light: #f2e7e4;
    --info-color: #23405f;      /* info folds into the accent */
    --info-light: var(--primary-light);

    /* Neutral Colors */
    --background: #f4f5f3;       /* paper page — never pure white */
    --surface: #ffffff;         /* raised cards/tables/modals */
    --text-primary: #171c21;    /* ink, not black */
    --text-secondary: #444d56;
    --text-muted: #8b96a2;
    --border-color: rgba(23,28,33,0.09);
    --border-light: #eceeec;

    /* Accent — SAME pen-blue (the old orange is gone) */
    --accent-color: #23405f;
    --accent-hover: #1a314a;

    /* Extra ink/paper steps used by the Peitho system */
    --ink-soft: #2a323a;        /* serif/emphasis body */
    --ink-muted: #5a6470;       /* captions, secondary */
    --field-bg: #fdfdfc;        /* input backgrounds */
    --paper-tint: #fafbfa;      /* card headers, toolbars, hover */
    --paper-sunken: #eceeec;    /* wells, footers, inactive chips */

    /* Sidebar — dark ink section */
    --sidebar-bg: #171c21;
    --sidebar-hover: rgba(127,155,189,0.10);
    --sidebar-active: rgba(127,155,189,0.16);
    --sidebar-text: #99a2ab;
    --sidebar-text-active: #f4f5f3;
    --sidebar-width: 250px;     /* unchanged; the 220px @<=1400 override stays */

    /* Typography — three families, strict roles (see docs/styling.md §… / the brief) */
    --font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;   /* DISPLAY ONLY */
    --font-body: Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ALL numbers/notation */

    /* Shadows — layered & cool (never a single heavy blur) */
    --shadow-sm: 0 1px 2px rgba(23,28,33,0.05);
    --shadow-md: 0 1px 2px rgba(23,28,33,0.05), 0 24px 48px -24px rgba(23,28,33,0.16);
    --shadow-lg: 0 1px 2px rgba(23,28,33,0.06), 0 48px 80px -32px rgba(23,28,33,0.28);
    --shadow-btn: 0 2px 4px rgba(35,64,95,0.25), 0 10px 24px -8px rgba(35,64,95,0.35);

    /* Radius scale — use everywhere */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Card & Surface aliases */
    --card-bg: var(--surface);
    --cream: var(--background);

    /* Background aliases (used across dashboard & components) */
    --bg-secondary: var(--background);
    --bg-hover: var(--paper-tint);
    --hover-bg: var(--paper-tint);
}