/*
    theme.css — the single source of truth for the design's values.

    The palette is sampled from the association's logo (wwwroot/images/Logo_1.png):
    the ring green is #36562C and the calligraphy gold is #F2F17B. Both are kept as
    the 700 and 300 steps of their ramps so the brand colour appears unaltered.

    Nothing here draws anything. Rules live in the files that own each concern.
*/

:root {
    /* Brand green — the logo ring. */
    --green-50: #F5F9F3;
    --green-100: #E6F0E2;
    --green-200: #CDE3C7;
    --green-300: #A9CF9E;
    --green-400: #7BB569;
    --green-500: #578E46;
    --green-600: #426B36;
    --green-700: #36562C;
    --green-800: #294222;
    --green-900: #1D3018;
    --green-950: #142110;

    /* Brand gold — the logo calligraphy. */
    --gold-50: #FDFDED;
    --gold-100: #FBFBD2;
    --gold-200: #F8F8AF;
    --gold-300: #F2F17B;
    --gold-400: #E2E150;
    --gold-500: #C2C12E;
    --gold-600: #9B9A24;
    --gold-700: #7C7B1D;
    --gold-800: #605F18;
    --gold-900: #474613;

    /* Neutrals carry a trace of the brand hue so greys sit beside the green. */
    --neutral-0: #FFFFFF;
    --neutral-25: #FAFBF9;
    --neutral-50: #F4F6F2;
    --neutral-100: #EBEEE8;
    --neutral-200: #DCE1D7;
    --neutral-300: #C2C9BC;
    --neutral-400: #9AA394;
    --neutral-500: #737C6D;
    --neutral-600: #565E51;
    --neutral-700: #40463C;
    --neutral-800: #2C312A;
    --neutral-900: #1C1F1A;
    --neutral-950: #121410;

    /* Status hues, kept clear of the brand green so state still reads as state. */
    --positive-500: #2E7D4F;
    --positive-100: #DFF2E6;
    --caution-500: #9B6B10;
    --caution-100: #FBEFD6;
    --critical-500: #AE3B30;
    --critical-100: #FAE5E2;
    --notice-500: #2A6098;
    --notice-100: #E2EDF8;

    /* ---- Semantic roles: what the rest of the stylesheets actually use ---- */
    --brand: var(--green-700);
    --brand-strong: var(--green-800);
    --brand-muted: var(--green-600);
    --brand-soft: var(--green-100);
    --brand-softer: var(--green-50);
    --brand-contrast: #FFFFFF;

    --accent: var(--gold-600);
    --accent-bright: var(--gold-300);
    --accent-soft: var(--gold-100);
    --accent-contrast: var(--green-950);

    --canvas: var(--neutral-50);
    --surface: var(--neutral-0);
    --surface-raised: var(--neutral-0);
    --surface-sunken: var(--neutral-25);
    --surface-hover: var(--neutral-50);
    --surface-selected: var(--green-50);

    --text: var(--neutral-900);
    --text-muted: var(--neutral-600);
    --text-subtle: var(--neutral-500);
    --text-inverse: var(--neutral-0);
    --text-on-brand: #FFFFFF;

    --border: var(--neutral-200);
    --border-strong: var(--neutral-300);
    --border-brand: var(--green-300);

    --success: var(--positive-500);
    --success-soft: var(--positive-100);
    --warning: var(--caution-500);
    --warning-soft: var(--caution-100);
    --danger: var(--critical-500);
    --danger-soft: var(--critical-100);
    --info: var(--notice-500);
    --info-soft: var(--notice-100);

    --sidebar-surface: var(--green-800);
    --sidebar-surface-top: var(--green-700);
    --sidebar-text: #E8EFE4;
    --sidebar-text-muted: rgba(232, 239, 228, .62);
    --sidebar-heading: rgba(232, 239, 228, .45);
    --sidebar-hover: rgba(255, 255, 255, .08);
    --sidebar-active: rgba(255, 255, 255, .14);
    --sidebar-border: rgba(255, 255, 255, .1);
    --sidebar-marker: var(--accent-bright);

    /* ---- Typography ---- */
    --font-ui: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-numeric: "Cairo", ui-monospace, "Segoe UI", system-ui, sans-serif;

    --text-2xs: .6875rem;
    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-base: .875rem;
    --text-md: .9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-tight: 1.3;
    --leading-normal: 1.6;

    /* ---- Spacing: a 4px scale ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ---- Radii ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ---- Elevation ---- */
    --shadow-sm: 0 1px 2px rgba(20, 33, 16, .06), 0 1px 3px rgba(20, 33, 16, .04);
    --shadow-md: 0 4px 12px -2px rgba(20, 33, 16, .1), 0 2px 4px rgba(20, 33, 16, .05);
    --shadow-lg: 0 16px 40px -12px rgba(20, 33, 16, .22), 0 4px 12px rgba(20, 33, 16, .07);
    --shadow-focus: 0 0 0 3px rgba(86, 142, 70, .3);

    /* ---- Motion ---- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: .12s;
    --duration: .2s;

    /* ---- Shell metrics ---- */
    --sidebar-width: 264px;
    --sidebar-width-collapsed: 72px;
    --topbar-height: 60px;
    --page-max-width: 1680px;
    --page-gutter: var(--space-6);

    /* ---- Table density: dense rows, generous columns ---- */
    --cell-padding-y: 9px;
    --cell-padding-x: 14px;
    --cell-padding-y-compact: 6px;
    --head-height: 40px;
}

[data-theme="dark"] {
    --canvas: #0F120D;
    --surface: #181C15;
    --surface-raised: #1E2219;
    --surface-sunken: #141811;
    --surface-hover: #232820;
    --surface-selected: #23301D;

    --text: #E9EDE5;
    --text-muted: #A8B2A1;
    --text-subtle: #828C7C;
    --text-inverse: var(--neutral-950);

    --border: #2C3228;
    --border-strong: #3C4437;
    --border-brand: var(--green-600);

    --brand: var(--green-400);
    --brand-strong: var(--green-300);
    --brand-muted: var(--green-500);
    --brand-soft: #22301B;
    --brand-softer: #1B2416;
    --brand-contrast: var(--green-950);

    --accent: var(--gold-400);
    --accent-soft: #332F13;
    --accent-contrast: var(--green-950);

    --success: #5FBE84;
    --success-soft: #1D2E22;
    --warning: #D9A440;
    --warning-soft: #332A14;
    --danger: #E08078;
    --danger-soft: #35201D;
    --info: #74A8DC;
    --info-soft: #1B2833;

    --sidebar-surface: #141811;
    --sidebar-surface-top: #1A1F15;
    --sidebar-text: #DCE4D6;
    --sidebar-border: rgba(255, 255, 255, .07);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .65);
    --shadow-focus: 0 0 0 3px rgba(123, 181, 105, .35);

    color-scheme: dark;
}