/* ══════════════════════════════════════════════════════════════════
   euWards — Design Tokens
   Colors, typography, radius, shadow primitives for all artifacts.
   Source: docs/specs/brand_design.md + frontend_design_system.md
   (TRM-Platform repo @ Ludvig14th)
══════════════════════════════════════════════════════════════════ */

/* ── BRAND FONTS — variable, brand-supplied, locally hosted ──────
   Inter:          opsz (14-32) + wght (100-900) axes — one file each
                   for upright + italic. `font-optical-sizing: auto`
                   on html makes glyph shape adapt to size.
   Space Grotesk:  wght (300-700) axis — one file covers all weights.
   JetBrains Mono: wght (100-800) axis — upright + italic variable
                   files for data and monospace cells.
   All under SIL OFL 1.1 — license files in fonts/*OFL.txt.
── */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 75% 125%;
    src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 75% 125%;
    src: url("fonts/Inter-Italic-VariableFont.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    src: url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    src: url("fonts/JetBrainsMono-VariableFont.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 100 800;
    src: url("fonts/JetBrainsMono-Italic-VariableFont.ttf") format("truetype");
    font-display: swap;
}

html { font-optical-sizing: auto; }

:root {
    /* ── BRAND CORE ── */
    --euwards-green:        #5E9370;   /* Pistachio — primary, knowledge / growth */
    --euwards-violet:       #4D4A8F;   /* Dark Soft Violet — secondary, structure / analysis */
    --euwards-cream:        #ece4d6;   /* Warm cream — page bg, balance / reward */
    --euwards-navy:         #303348;   /* Body text + dark slide bg */
    --euwards-black:        #1a1a1a;   /* near-black */
    --logo-red:            #BC0000;   /* euWards logo dot — SAME red as --destructive (intentional). NOT the bright RAG red #E80000. */

    /* ── SURFACES — three modes ─────────────────────────────────────
       1. Brand  (cream  #ece4d6) — default. App shell, slides, doc covers.
                                    The euWards identity lives on cream.
       2. Paper  (white  #ffffff) — opt-in for long-form Word body, one-pagers,
                                    print where ink coverage matters.
                                    Add class="surface-paper" on any wrapper.
       3. Dark   (navy   #303348) — opt-in for dark slides, hero sections,
                                    presentation mode. Add class="dark" on
                                    any wrapper — also inverts fg, borders,
                                    and the navy/cream chart slots.
       Never cool grey. Borders and accents follow the surface, not the OS.
    ── */
    --surface-brand:       #ece4d6;
    --surface-paper:       #ffffff;
    --surface-dark:        #303348;

    --bg:                  var(--surface-brand);   /* the chosen surface */
    --bg-elev-1:           #f2ede1;   /* sidebar / table header — cream 80% + white */
    --bg-elev-2:           #f5f0e6;   /* card / popover — cream 60% + white; doubles as cream-fg */
    --surface-white:       #ffffff;   /* odd table rows, doc body */
    --surface-stripe:      #f2ede6;   /* even table rows */
    --surface-tint-green:  #e8f0ea;   /* totals row, available pill bg */
    --surface-tint-amber:  #f5e8d2;   /* in-progress pill bg */
    --surface-tint-red:    #fae0e0;   /* error pill bg */

    /* ── TEXT ── */
    --fg:                  #303348;   /* body + headings */
    --fg-on-fill:          #f5f0e6;   /* text on green/violet/navy fills */
    --fg-muted:            #636a76;   /* captions, helper, footer */
    --fg-disabled:         #9ba3b0;

    /* ── BORDERS / RULES ── */
    --border:              #d2cbc0;   /* default warm border */
    --border-strong:       #b9b2a5;
    --input:               #d2cbc0;
    --ring:                #5E9370;

    /* ── SEMANTIC ── */
    --primary:             #5E9370;   /* green — also success/available (no separate --success) */
    --primary-fg:          #f5f0e6;
    --secondary:           #4D4A8F;   /* bold violet — NOT a muted neutral */
    --secondary-fg:        #f5f0e6;
    --warning:             #FFC000;   /* bright yellow — FILL only (in-progress/caution) */
    --warning-fg:          #303348;   /* text on yellow fill — BLACK, never cream */
    --warning-ink:         #c97d20;   /* amber — for warning TEXT & soft tints (yellow is illegible as text) */
    --destructive:         #BC0000;   /* UI error/danger — same red as the logo dot */
    --destructive-fg:      #f5f0e6;
    --success:             #5E9370;   /* alias of primary */
    --danger:              #BC0000;   /* alias of destructive */

    /* RAG / traffic-light status — the BOLD status layer (dots, chips,
       governance dashboards, RAG tables, PPTX status). Mode-invariant.
       Green & Red are SPLIT from the UI tokens (--primary/--destructive
       stay UI); Amber is UNIFIED with --warning. Values match the live
       platform index.css (authoritative).
       FOREGROUND RULE: green & amber carry DARK NAVY text; red & grey
       carry WHITE (dark text on red is only 3.08:1). Never use the amber
       fill as text — use --warning-ink instead.
       Two idle states: --rag-grey is a SOLID grey fill (Restricted /
       Disabled / Coming soon); --rag-inactive-border is the OUTLINE-only
       treatment (Not started / Ready / No data — transparent + border). */
    --rag-green:           #22c55e;   /* Available / Complete / On track — DARK NAVY text (5.44:1) */
    --rag-amber:           #FFC000;   /* In progress / Caution — dark navy text (= --warning) */
    --rag-red:             #E80000;   /* Blocked / Off track / Error — WHITE text (4.74:1) */
    --rag-grey:            #94a3b8;   /* Restricted / Disabled / Coming soon — WHITE text (solid) */
    --rag-green-fg:        #303348;   /* navy ink on green & amber fills */
    --rag-red-fg:          #ffffff;   /* white ink on red & grey fills */
    --rag-inactive-border: #d2cbc0;   /* outline-only idle pill border */

    /* ── STATUS TINT SET ──────────────────────────────────────────
       Low-emphasis SOFT-TINT pills for inline status (tables/cards) —
       distinct from the BOLD RAG fills above. Map labels:
         not-started / awaiting / restricted → --neutral (outline only, no fill)
         complete / available / signed-off   → --good  + --good-bg
         in-progress / review / caution       → --med   + --med-bg
         error / alert / blocked              → --bad   + --bad-bg
    ── */
    --neutral:             #636a76;   /* = --fg-muted; idle/not-started pills use outline + this color, not a fill */
    --good:                #5E9370;   /* UI success tint anchor (NOT the bright RAG green) */
    --med:                 #c97d20;   /* amber ink for in-progress text/tints (NOT the bright RAG yellow) */
    --bad:                 #BC0000;   /* UI error tint anchor (NOT the bright RAG red) */
    --good-bg:             #dff0e6;   /* status pill: complete / available */
    --med-bg:              #f5e8d2;   /* status pill: in progress */
    --bad-bg:              #fae0e0;   /* status pill: error / alert */

    /* ── DARK VARIANTS (use on navy backgrounds only) ── */
    --primary-dk:          #7aad88;
    --secondary-dk:        #6e6ab0;
    --muted-dk:            #9ba3b0;
    --warning-dk:          #FFC000;   /* yellow fill unchanged on dark */
    --warning-ink-dk:      #e0a040;   /* amber text on dark */
    --destructive-dk:      #e85858;   /* logo/UI red on dark */

    /* ── CATEGORICAL / CHART PALETTE ────────────────────────────────────────────────
       Six-colour brand palette. MODE-INVARIANT — identical hex on
       cream and navy. Distinct from UI semantic tokens AND the RAG
       palette: never use a chart colour for status, nor a RAG colour
       as a series. Light text on 1/2/5; 3/4/6 are lighter. */
    --chart-1: #5E9370;   /* Pistachio Green */
    --chart-2: #4D4A8F;   /* Dark Soft Violet */
    --chart-3: #8DA0BE;   /* Slate Blue */
    --chart-4: #93B39C;   /* Sage Green */
    --chart-5: #284B8F;   /* Royal Navy */
    --chart-6: #8A87C0;   /* Light Violet */

    /* ── RADIUS (10 px base; buttons override to pill) ── */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  10px;   /* base */
    --radius-xl:  14px;
    --radius-2xl: 18px;
    --radius-pill: 9999px;

    /* ── SHADOW SYSTEM — flat, hard, no blur (brand signature) ── */
    --shadow-card:        3px 3px 0 0 rgba(48, 51, 72, 0.08);
    --shadow-card-strong: 5px 5px 0 0 rgba(48, 51, 72, 0.10);
    --shadow-btn-green:   2px 2px 0 0 rgba(94, 147, 112, 0.35);
    --shadow-btn-violet:  2px 2px 0 0 rgba(77, 74, 143, 0.35);
    --shadow-btn-amber:   2px 2px 0 0 rgba(201, 125, 32, 0.25);
    --shadow-btn-red:     2px 2px 0 0 rgba(188, 0, 0, 0.30);
    --shadow-btn-neutral: 2px 2px 0 0 rgba(48, 51, 72, 0.18);
    --shadow-input:       inset 1.5px 1.5px 0 0 rgba(48, 51, 72, 0.08);
    --shadow-input-focus:
        inset 1.5px 1.5px 0 0 rgba(94, 147, 112, 0.5),
        0 0 0 2px rgba(94, 147, 112, 0.15);

    /* ── SPACING (4-pt scale; loose density) ── */
    --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-16: 64px;

    /* ── TYPOGRAPHY — font stacks ──
       Brand face first, then a neutral generic only. No named
       web-safe substitutes (Trebuchet / Calibri / Consolas): all three
       families are self-hosted via @font-face above, so a named
       substitute would only ever mask a load failure. Office-export
       fallbacks are handled at export time (fontSwaps), not here. */
    --font-heading: "Space Grotesk", system-ui, sans-serif;
    --font-sans:    "Inter", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    /* ── TYPE SIZES — WEB APP SCALE (default) ──────────────────
       Screens, dashboards, decks viewed at arm's length.
       Document scale (smaller, ink-on-paper) lives under .surface-paper. */
    --fs-xs:   11px;   /* metadata / caption */
    --fs-sm:   13px;   /* secondary body */
    --fs-base: 14px;   /* default body */
    --fs-md:   16px;
    --fs-lg:   18px;   /* section heading */
    --fs-xl:   22px;   /* card title */
    --fs-2xl:  28px;   /* page title */
    --fs-3xl:  36px;   /* hero / cover */

    /* ── LINE-HEIGHTS ── */
    --lh-tight:  1.15;   /* @kind font */
    --lh-snug:   1.35;   /* @kind font */
    --lh-normal: 1.5;    /* @kind font */

    /* ── LETTER-SPACING ── */
    --tracking-tight:  -0.01em;
    --tracking-normal: 0em;
    --tracking-wide:   0.08em;   /* table headers, eyebrow caps */
    --tracking-wider:  0.12em;   /* section tags */
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE (apply .dark to <html> or any ancestor)
══════════════════════════════════════════════════════════════════ */
.dark {
    --bg:           var(--surface-dark);
    --bg-elev-1:    #2a2c3e;
    --bg-elev-2:    #3d3f52;
    --fg:           #f5f0e6;
    --fg-muted:     #9ba3b0;
    --border:       rgba(255, 255, 255, 0.10);
    --input:        rgba(255, 255, 255, 0.15);
    --ring:         #7aad88;
    --primary:      #7aad88;
    --secondary:    #6e6ab0;
    --warning:      #FFC000;
    --warning-ink:  #e0a040;
    --destructive:  #e85858;
}

/* ══════════════════════════════════════════════════════════════════
   SURFACE MODE OVERRIDE
   .surface-paper on any wrapper flips the page background to white.
   For long-form Word body pages, one-pagers, and print deliverables.
══════════════════════════════════════════════════════════════════ */
.surface-paper {
    --bg: var(--surface-paper);
    /* Soften the elevation ramp so cards still read on a white page */
    --bg-elev-1: #faf8f3;   /* very subtle warm grey */
    --bg-elev-2: #f5f0e6;   /* unchanged — keeps cards warm */

    /* ── DOCUMENT TYPE SCALE ───────────────────────────────────
       Tighter sizes for print / Word body. Read at ~30cm on paper,
       not 60cm on a monitor — what looks "small" on screen lands
       correctly at 100% on the printed page. */
    --fs-xs:   8px;    /* footnote / caption / source / mono ref */
    --fs-sm:   10px;   /* secondary body, table cells */
    --fs-base: 12px;   /* default body */
    --fs-md:   13px;
    --fs-lg:   14px;   /* H3 — section */
    --fs-xl:   18px;   /* H2 — card / sub-section */
    --fs-2xl:  24px;   /* H1 — page title */
    --fs-3xl:  32px;   /* Display — doc cover */
}

/* ══════════════════════════════════════════════════════════════════
   SEMANTIC TYPE STYLES
══════════════════════════════════════════════════════════════════ */
html { font-family: var(--font-sans); color: var(--fg); }

.t-display, .euwards-display {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
}

.t-h1, h1.euwards {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
}

.t-h2, h2.euwards {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    color: var(--fg);
}

.t-h3, h3.euwards {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--fg);
}

.t-h4, h4.euwards {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--fg);
}

.t-body, p.euwards {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--fg);
}

.t-body-sm {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--fg);
}

.t-caption {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--fg-muted);
}

.t-eyebrow {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--primary);
}

.t-label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
}

.t-mono, code.euwards {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg);
}

/* ══════════════════════════════════════════════════════════════════
   UTILITY HELPERS
══════════════════════════════════════════════════════════════════ */
.euwards-card {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.euwards-rule { height: 1.5px; background: var(--primary); border: 0; }
.euwards-rule-violet { height: 1.5px; background: var(--secondary); border: 0; }

.euwards-diagonal {
    position: absolute;
    width: 1.5px;
    background: rgba(26, 26, 26, 0.10);
    height: 160%;
    top: -30%;
    transform: rotate(28deg);
    pointer-events: none;
}
.euwards-diagonal.on-dark { background: rgba(255, 255, 255, 0.10); }