/* ============================================================================
   kHouse Dossier · Design Tokens
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for all visual tokens.
   - All other CSS files reference these custom properties; never invent values.
   - Theme = swap the [data-theme] block. Accent = swap the [data-accent] block.
   - Density = swap the [data-density] block. Radius = swap [data-radius].
   - JS may write to these via documentElement.style.setProperty('--kd-...').
   ============================================================================ */

:root {
    /* ---- Type families ---- */
    --kd-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --kd-font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', ui-monospace, monospace;

    /* ---- Type scale (modular, fluid where helpful) ---- */
    --kd-text-9:   clamp(40px, 5vw, 64px);   /* hero display */
    --kd-text-8:   clamp(32px, 4vw, 48px);   /* page H1 */
    --kd-text-7:   clamp(26px, 3vw, 36px);   /* section H2 */
    --kd-text-6:   24px;
    --kd-text-5:   20px;
    --kd-text-4:   17px;                     /* lede / body-lg */
    --kd-text-3:   15px;                     /* body */
    --kd-text-2:   13px;                     /* small */
    --kd-text-1:   11px;                     /* mono micro labels */
    --kd-text-0:   10px;                     /* badge / ref code */

    /* ---- Letter spacing ---- */
    --kd-track-tight:  -0.02em;
    --kd-track-snug:   -0.01em;
    --kd-track-normal: 0;
    --kd-track-loose:  0.12em;
    --kd-track-mono:   0.18em;   /* mono labels: REF · INTEL · COMMS */

    /* ---- Weight ---- */
    --kd-w-regular: 400;
    --kd-w-medium:  500;
    --kd-w-semi:    600;
    --kd-w-bold:    700;

    /* ---- Spacing scale (4px base) ---- */
    --kd-s-1:  4px;
    --kd-s-2:  8px;
    --kd-s-3:  12px;
    --kd-s-4:  16px;
    --kd-s-5:  20px;
    --kd-s-6:  24px;
    --kd-s-7:  32px;
    --kd-s-8:  40px;
    --kd-s-9:  48px;
    --kd-s-10: 64px;
    --kd-s-11: 80px;
    --kd-s-12: 96px;

    /* ---- Density (overridden by [data-density]) ---- */
    --kd-pad-section-y: var(--kd-s-10);
    --kd-pad-card:      var(--kd-s-6);
    --kd-pad-block:     var(--kd-s-7);
    --kd-gap-grid:      var(--kd-s-6);

    /* ---- Radius (overridden by [data-radius]) ---- */
    --kd-r-0: 0;
    --kd-r-1: 2px;
    --kd-r-2: 4px;
    --kd-r-3: 8px;
    --kd-r-pill: 999px;
    --kd-radius: var(--kd-r-0);   /* default = sharp */

    /* ---- Border ---- */
    --kd-border-w: 1px;

    /* ---- Container ---- */
    --kd-container: 1240px;
    --kd-container-pad: var(--kd-s-6);

    /* ---- Motion ---- */
    --kd-ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --kd-dur-fast: 120ms;
    --kd-dur:      200ms;
    --kd-dur-slow: 320ms;

    /* ---- Z layers ---- */
    --kd-z-sticky: 100;
    --kd-z-modal:  1000;
    --kd-z-toast:  1100;

    /* ---- Semantic status colors (fixed, theme-agnostic intent) ---- */
    --kd-c-ok:       #2f9e44;   /* operational */
    --kd-c-ok-soft:  #2f9e4422;
    --kd-c-warn:     #d97706;   /* caution */
    --kd-c-warn-soft:#d9770622;
    --kd-c-crit:     #dc2626;   /* restricted */
    --kd-c-crit-soft:#dc262622;
    --kd-c-info:     #006AA7;   /* swedish flag blue */
    --kd-c-info-soft:#006AA722;
    --kd-c-flag-y:   #FECC00;   /* swedish flag yellow */
}

/* ============================================================================
   THEMES — light is default.
   Tokens here are the only place colors are defined per-mode.
   ============================================================================ */

:root,
[data-theme="light"] {
    --kd-bg:        #ffffff;
    --kd-bg-alt:    #f6f7f9;
    --kd-bg-sunken: #eceef2;
    --kd-fg:        #0a0c10;
    --kd-fg-soft:   #3a4150;
    --kd-fg-muted:  #6b7280;
    --kd-border:    #e3e6ec;
    --kd-border-strong: #c8ccd4;
    --kd-overlay:   rgba(255, 255, 255, 0.86);
    --kd-shadow-1:  0 1px 0 rgba(10, 12, 16, 0.04);
    --kd-shadow-2:  0 12px 28px -16px rgba(10, 12, 16, 0.18);
    --kd-stat-bg:   #ffffff;
    color-scheme: light;
}

[data-theme="dark"] {
    --kd-bg:        #0a0c10;
    --kd-bg-alt:    #11141a;
    --kd-bg-sunken: #181c24;
    --kd-fg:        #f5f6f8;
    --kd-fg-soft:   #c8ccd4;
    --kd-fg-muted:  #8a92a0;
    --kd-border:    #232831;
    --kd-border-strong: #353b46;
    --kd-overlay:   rgba(10, 12, 16, 0.78);
    --kd-shadow-1:  0 1px 0 rgba(0, 0, 0, 0.4);
    --kd-shadow-2:  0 12px 28px -16px rgba(0, 0, 0, 0.6);
    --kd-stat-bg:   #11141a;
    color-scheme: dark;
}

/* Gray — uniformly muted slate palette. Light enough to read, low chroma. */
[data-theme="gray"] {
    --kd-bg:        #e7eaee;
    --kd-bg-alt:    #dee2e7;
    --kd-bg-sunken: #d4d8de;
    --kd-fg:        #2f3540;
    --kd-fg-soft:   #4f5663;
    --kd-fg-muted:  #6e7682;
    --kd-border:    #c2c7cf;
    --kd-border-strong: #a8aeb8;
    --kd-overlay:   rgba(231, 234, 238, 0.86);
    --kd-shadow-1:  0 1px 0 rgba(47, 53, 64, 0.06);
    --kd-shadow-2:  0 12px 28px -16px rgba(47, 53, 64, 0.22);
    --kd-stat-bg:   #e7eaee;
    color-scheme: light;
}

/* ============================================================================
   ACCENTS — the "operational" color used for CTAs, focus rings, link underlines.
   Default = monochrome (accent = fg). Override via [data-accent].
   ============================================================================ */

:root,
[data-accent="mono"] {
    --kd-accent:        var(--kd-fg);
    --kd-accent-fg:     var(--kd-bg);
    --kd-accent-soft:   var(--kd-bg-sunken);
    --kd-accent-ring:   color-mix(in srgb, var(--kd-fg) 22%, transparent);
}
[data-accent="swe-blue"] {
    --kd-accent:        #006AA7;
    --kd-accent-fg:     #ffffff;
    --kd-accent-soft:   #006AA718;
    --kd-accent-ring:   #006AA755;
}
[data-accent="swe-yellow"] {
    --kd-accent:        #FECC00;
    --kd-accent-fg:     #0a0c10;
    --kd-accent-soft:   #FECC0022;
    --kd-accent-ring:   #FECC0066;
}
[data-accent="amber"] {
    --kd-accent:        #d97706;
    --kd-accent-fg:     #ffffff;
    --kd-accent-soft:   #d9770618;
    --kd-accent-ring:   #d9770655;
}
[data-accent="ops-green"] {
    --kd-accent:        #2f9e44;
    --kd-accent-fg:     #ffffff;
    --kd-accent-soft:   #2f9e4418;
    --kd-accent-ring:   #2f9e4455;
}
[data-accent="crit-red"] {
    --kd-accent:        #c92a2a;
    --kd-accent-fg:     #ffffff;
    --kd-accent-soft:   #c92a2a18;
    --kd-accent-ring:   #c92a2a55;
}

/* ============================================================================
   DENSITY — controls section/card padding only. Type stays put.
   ============================================================================ */

[data-density="compact"] {
    --kd-pad-section-y: var(--kd-s-8);
    --kd-pad-card:      var(--kd-s-4);
    --kd-pad-block:     var(--kd-s-5);
    --kd-gap-grid:      var(--kd-s-4);
}
[data-density="cozy"] {
    --kd-pad-section-y: var(--kd-s-10);
    --kd-pad-card:      var(--kd-s-6);
    --kd-pad-block:     var(--kd-s-7);
    --kd-gap-grid:      var(--kd-s-6);
}
[data-density="roomy"] {
    --kd-pad-section-y: var(--kd-s-12);
    --kd-pad-card:      var(--kd-s-7);
    --kd-pad-block:     var(--kd-s-9);
    --kd-gap-grid:      var(--kd-s-7);
}

/* ============================================================================
   RADIUS PRESETS — system-wide rounding. Default sharp matches dossier feel.
   ============================================================================ */

[data-radius="sharp"]   { --kd-radius: var(--kd-r-0); }
[data-radius="subtle"]  { --kd-radius: var(--kd-r-1); }
[data-radius="soft"]    { --kd-radius: var(--kd-r-2); }
[data-radius="rounded"] { --kd-radius: var(--kd-r-3); }

/* ============================================================================
   MONO LABELS TOGGLE — when off, mono micro-labels become regular sans.
   Tokens, not class swaps, so it cascades cleanly.
   ============================================================================ */

[data-mono="off"] {
    --kd-font-mono: var(--kd-font-sans);
    --kd-track-mono: 0.06em;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --kd-dur-fast: 0ms;
        --kd-dur: 0ms;
        --kd-dur-slow: 0ms;
    }
}