/* ============================================================
 * Early Warning Index — Colors & Type
 * Source of truth: covenanthorizon.earlywarningindex.com (DA)
 * Used by Covenant Horizon, BoardReady, Decision Latency,
 * Optimism Audit, Pre-Mortem, Early Warning, All Access.
 * ============================================================ */

/* --- Webfonts (loaded from Google Fonts CDN) ---------------- */
/* H1 / display: Instrument Serif (per brand spec)
 * Body: system sans-serif stack (matches the production CSS in /da/)
 * Mono: SF Mono / ui-monospace for tabular figures
 */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root {
    /* ============================================================
     * COLOR TOKENS — base
     * Lifted 1:1 from /da/index.html (production)
     * ============================================================ */

    /* Surfaces */
    --bg:           #f8f9fb;   /* page background — warm off-white */
    --bg-card:      #ffffff;   /* card / surface */
    --bg-input:     #f1f3f7;   /* inset input fields + alt sections */
    --bg-hero:      linear-gradient(180deg, #f0f4ff 0%, #f8f9fb 100%);

    /* Borders */
    --border:       #e2e5ec;   /* default 1px borders */
    --border-focus: #94a3b8;   /* focus ring */

    /* Text */
    --text:         #1a1d27;   /* primary text — near-black w/ blue cast */
    --text-muted:   #5a6478;   /* secondary text */
    --text-dim:     #8892a4;   /* tertiary / hints / eyebrow labels */

    /* Buttons — primary CTAs are DARK, not blue.
     * Blue is reserved for accent (links, small CTAs, focus rings, score chips).
     */
    --btn-bg:         #1a1d27;   /* near-black, same as --text */
    --btn-bg-hover:   #000000;
    --btn-fg:         #ffffff;

    /* Brand — Blue (ACCENT only — links, small CTAs, focus, score-chip fills) */
    --accent:         #2563eb;
    --accent-hover:   #1d4ed8;
    --accent-deep:    #1e40af;
    --primary:        #2563eb;   /* alias kept for components that semantically mean "the brand color" */
    --primary-hover:  #1d4ed8;
    --primary-deep:   #1e40af;
    --info-bg:        rgba(37, 99, 235, 0.05);
    --info-bg-strong: rgba(37, 99, 235, 0.08);
    --info-border:    rgba(37, 99, 235, 0.15);
    --info-text:      #1e40af;

    /* Brand — Orange (secondary accent — highlights, attention pulls, EWI score warm states) */
    --orange:         #ea580c;
    --orange-hover:   #c2410c;
    --orange-deep:    #9a3412;
    --orange-bg:      rgba(234, 88, 12, 0.06);
    --orange-bg-strong: rgba(234, 88, 12, 0.10);
    --orange-border:  rgba(234, 88, 12, 0.20);
    --orange-text:    #9a3412;

    /* Semantic — Danger (red) */
    --danger:         #dc2626;
    --danger-bg:      rgba(220, 38, 38, 0.06);
    --danger-border:  rgba(220, 38, 38, 0.20);
    --danger-text:    #991b1b;

    /* Semantic — Warning (amber) */
    --warning:        #d97706;
    --warning-bg:     rgba(217, 119, 6, 0.06);
    --warning-border: rgba(217, 119, 6, 0.20);
    --warning-text:   #92400e;

    /* Semantic — Success (green) */
    --success:        #059669;
    --success-bg:     rgba(5, 150, 105, 0.06);
    --success-border: rgba(5, 150, 105, 0.20);
    --success-text:   #065f46;

    /* AI / "Pro" accent — violet */
    --pro:            #8b5cf6;
    --pro-deep:       #6366f1;
    --pro-gradient:   linear-gradient(135deg, #8b5cf6, #6366f1);

    /* Tool-card icon tints (pastel chips behind emoji) */
    --tint-violet: #ede9fe;
    --tint-green:  #d1fae5;
    --tint-amber:  #fef3c7;
    --tint-red:    #fee2e2;
    --tint-mint:   #dcfce7;

    /* ============================================================
     * SHADOWS — minimal, never theatrical
     * ============================================================ */
    --shadow:    0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-cta:  0 4px 12px rgba(37,99,235,0.35);

    /* ============================================================
     * RADII
     * ============================================================ */
    --radius-sm:  6px;
    --radius:     0.5rem;    /* 8px — buttons, inputs */
    --radius-lg:  0.75rem;   /* 12px — cards */
    --radius-pill: 999px;    /* badges, chips */

    /* ============================================================
     * TYPE — families
     * ============================================================ */
    --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
    --font-sans:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', Monaco, Consolas, monospace;

    /* ============================================================
     * TYPE — semantic sizes
     * Compact, readable; the product favours dense forms over big copy.
     * H1 uses Instrument Serif; H2/H3/body use sans.
     * ============================================================ */
    --fs-h1:       2.1rem;    /* hero */
    --fs-h1-mob:   1.5rem;
    --fs-h2:       1.5rem;    /* section title */
    --fs-h3:       0.92rem;   /* card title */
    --fs-body:     0.95rem;
    --fs-body-sm:  0.85rem;
    --fs-meta:     0.75rem;
    --fs-eyebrow:  0.7rem;    /* UPPERCASE 0.12em letter-spacing */
    --lh-tight:    1.2;
    --lh-body:     1.6;

    /* ============================================================
     * SPACING — used loosely; rem-based
     * ============================================================ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
}

/* ============================================================
 * Base resets + body
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
}

/* ============================================================
 * Semantic type classes
 * (use these instead of styling raw tags so utility hooks stay sane)
 * ============================================================ */
.ewi-h1, h1 {
    font-family: var(--font-display);
    font-weight: 400;          /* Instrument Serif looks heaviest at 400 */
    font-size: var(--fs-h1);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
}

.ewi-h2, h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.25;
    color: var(--text);
}

.ewi-h3, h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-h3);
    color: var(--text);
}

.ewi-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
}

.ewi-body { font-size: var(--fs-body); color: var(--text); }
.ewi-body-sm { font-size: var(--fs-body-sm); color: var(--text-muted); }
.ewi-meta { font-size: var(--fs-meta); color: var(--text-dim); }
.ewi-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Numbers in stats / metrics always use tabular figures */
.ewi-num { font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .ewi-h1, h1 { font-size: var(--fs-h1-mob); }
}