/* ==========================================================================
   BASE DESIGN TOKENS
   Change values here to re-theme the entire application.
   Every other CSS file should reference these variables, never raw colors.
   ========================================================================== */

:root {
    /* ---- Brand / accent ---- */
    --color-primary: #1F2937; /*#185fa5*/ /* main accent - links, active nav, primary buttons */
    --color-primary-hover: #124a82;
    --color-primary-light: #e6f1fb; /* pale accent bg - active nav item, badges */
    /* ---- Neutrals / surfaces ---- */
    --color-bg: #f7f6f2; /* page background */
    --color-surface: #ffffff; /* cards, content panel */
    --color-surface-alt: #1F2937; /*#62bdeb;*/ /* sidebar bg, table header bg */
    /* ---- Borders ---- */
    --color-border: #e4e2da;
    --color-border-strong: #d3d1c7;
    /* ---- Text ---- */
    --color-text-primary: #1f1e1c;
    --color-text-secondary: #5f5e5a;
    --color-text-muted: #888780;
    --color-text-on-primary: #ffffff;
    --base-color: #1F2937; /* #62bdeb;*/
    /* ---- Status colors ---- */
    --color-success-bg: #eaf3de;
    --color-success-text: #27500a;
    --color-warning-bg: #faeeda;
    --color-warning-text: #854f0b;
    --color-danger-bg: #fcebeb;
    --color-danger-text: #791f1f;
    /* ---- Typography ---- */
    --font-family-base: "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-xxl: 28px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    /* ---- Spacing scale ---- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    /* ---- Shape ---- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    /* ---- Layout ---- */
    --sidebar-width: 240px;
}

/* Optional: uncomment and adjust to support dark mode later.
   Every component should already read from the variables above, so a
   dark theme is just a second block of overrides - nothing else changes.

[data-theme="dark"] {
    --color-bg: #1b1a18;
    --color-surface: #242320;
    --color-surface-alt: #2c2b27;
    --color-border: #3a3934;
    --color-text-primary: #f1efe8;
    --color-text-secondary: #b4b2a9;
    --color-text-muted: #888780;
}
*/

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-sm);
    font-weight: var(--font-weight-bold);
}

h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }

a {
    color: var(--color-primary);
}