/* ============================================================
   HUSBAROMETERN — DESIGN TOKENS
   Ändra här för att påverka hela siten.
   Alla komponenter refererar till dessa variabler.
   ============================================================ */

:root {
    /* ── Brand Colors ── */
    --hb-primary: #1a237e;           /* QICON mörkblå — headers, rubriker */
    --hb-primary-light: #283593;     /* Ljusare variant */
    --hb-accent: #75af61;            /* Husbarometern grön — knappar, steg */
    --hb-accent-hover: #669e54;      /* Hover-state */
    --hb-accent-light: #e8f5e9;      /* Ljusgrön bakgrund */

    /* ── Health Score Colors ── */
    --hb-health-critical: #d32f2f;   /* 0-24 poäng */
    --hb-health-poor: #f57c00;       /* 25-49 poäng */
    --hb-health-fair: #fbc02d;       /* 50-74 poäng */
    --hb-health-good: #2e7d32;       /* 75-100 poäng */

    /* ── Action Category Colors ── */
    --hb-action-critical-bg: #ffcdd2;
    --hb-action-critical-text: #b71c1c;
    --hb-action-urgent-bg: #ffe0b2;
    --hb-action-urgent-text: #e65100;
    --hb-action-plan-bg: #fff9c4;
    --hb-action-plan-text: #f57f17;
    --hb-action-info-bg: #c8e6c9;
    --hb-action-info-text: #1b5e20;
    --hb-action-unanswered-bg: #e8e8e8;
    --hb-action-unanswered-text: #666666;

    /* ── Text Colors ── */
    --hb-text-primary: #333333;
    --hb-text-secondary: #666666;
    --hb-text-muted: #999999;
    --hb-text-on-primary: #ffffff;
    --hb-text-on-accent: #ffffff;

    /* ── Background Colors ── */
    --hb-bg-page: #f7f8fa;
    --hb-bg-card: #ffffff;
    --hb-bg-section: #f8f9fa;
    --hb-bg-highlight: #f0f4f8;
    --hb-bg-bar-empty: #e0e0e0;
    --hb-bg-bar-unassessed: #f0f0f0;

    /* ── Border Colors ── */
    --hb-border-light: #e0e0e0;
    --hb-border-medium: #bdbdbd;
    --hb-border-accent: var(--hb-accent);

    /* ── Typography ── */
    --hb-font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --hb-font-size-xs: 0.75rem;     /* 12px */
    --hb-font-size-sm: 0.875rem;    /* 14px */
    --hb-font-size-base: 1rem;      /* 16px */
    --hb-font-size-lg: 1.125rem;    /* 18px */
    --hb-font-size-xl: 1.5rem;      /* 24px */
    --hb-font-size-2xl: 2rem;       /* 32px */
    --hb-font-weight-normal: 400;
    --hb-font-weight-medium: 500;
    --hb-font-weight-bold: 700;

    /* ── Spacing ── */
    --hb-space-xs: 4px;
    --hb-space-sm: 8px;
    --hb-space-md: 16px;
    --hb-space-lg: 24px;
    --hb-space-xl: 32px;
    --hb-space-2xl: 48px;

    /* ── Border Radius ── */
    --hb-radius-sm: 4px;
    --hb-radius-md: 8px;
    --hb-radius-lg: 12px;
    --hb-radius-full: 50%;

    /* ── Shadows ── */
    --hb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --hb-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
    --hb-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* ── Transitions ── */
    --hb-transition: 0.2s ease;

    /* ── Layout ── */
    --hb-max-width: 1200px;
    --hb-sidebar-width: 260px;
    --hb-header-height: 76px;
}

/* ── Dark Mode (framtida) ── */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --hb-bg-page: #121212;
        --hb-bg-card: #1e1e1e;
        --hb-text-primary: #e0e0e0;
    }
}
*/