/* ==========================================================================
   Design tokens
   All colours, sizes and effects of the new layout. Change the look here,
   not in the component files.
   ========================================================================== */

:root {
    /* Brand */
    --color-brand: #85B91C;
    --color-brand-dark: #6E9A14;
    --color-brand-darker: #3E5A0C;
    --color-brand-light: #EEF5E0;
    --color-brand-mid: #C9DE9A;
    --color-brand-ring: #E3EFC9;

    /* Neutrals */
    --color-dark: #101916;          /* top bar, dark panels */
    --color-dark-raised: #18241F;   /* hover on dark */
    --color-dark-line: #2B3A34;
    --color-on-dark: #E8EEE6;
    --color-on-dark-muted: #9AA59F;

    --color-bg: #F4F7F0;            /* page background */
    --color-surface: #FFFFFF;       /* cards */
    --color-surface-alt: #F7F9F3;   /* zebra rows, inputs */
    --color-text: #16211D;
    --color-text-muted: #6B7570;
    --color-line: #E4E9DF;
    --color-line-soft: #EEF1EA;
    --color-card-border: #EDF1E8;

    /* Status */
    --color-danger: #D9534F;
    --color-danger-light: #FBE9E8;
    --color-warning: #D99A1E;
    --color-warning-light: #FBF1DC;
    --color-info: #2F6FC4;
    --color-info-light: #E6EFFA;

    /* Category accents (report panels, charts) */
    --accent-green: #6E9A14;   --accent-green-tint: #EEF5E0;
    --accent-amber: #C27C0E;   --accent-amber-tint: #FBF1DC;
    --accent-blue: #2F6FC4;    --accent-blue-tint: #E6EFFA;
    --accent-teal: #0E7C72;    --accent-teal-tint: #E1F3F0;
    --accent-purple: #7C4DDB;  --accent-purple-tint: #F0EAFC;
    --accent-dark: #16211D;    --accent-dark-tint: #E9EDE7;

    /* Typography */
    --font-family: Urbanist, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size: 14px;
    --font-size-sm: 12.5px;
    --font-size-xs: 11.5px;
    --font-size-lg: 16px;
    --font-size-table: 13.5px;       /* every table cell, new and old screens */
    --font-size-table-head: 11.5px;  /* column headers (uppercase) */
    --font-weight-normal: 500;
    --font-weight-bold: 700;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 18px;
    --space-6: 24px;
    --space-7: 28px;

    /* Shape & depth */
    --radius-sm: 8px;
    --radius: 11px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-xl: 19px;
    --shadow-card: 0 1px 2px rgba(16, 25, 22, .05);
    --shadow-hover: 0 6px 18px rgba(16, 25, 22, .06);
    --shadow-popover: 0 18px 40px rgba(16, 25, 22, .18);

    /* Layout */
    --container-width: 1156px;
    --container-padding: clamp(12px, 2.6vw, 28px);
    --topbar-height: 68px;
    --transition: .15s ease;
}

@media (min-width: 1600px) {
    :root { --container-width: 1420px; }
}

@media (max-width: 900px) {
    :root { --topbar-height: 58px; }
}