/* Design tokens from mds/uixdesigns.md Section 3. */
/* Loaded AFTER Bootstrap so its overrides win; app.css (last) is the component layer. */

:root {
    color-scheme: light;
    /* Brand */
    --sv-maroon-900: #4C0328;
    --sv-maroon-700: #71043C;
    --sv-maroon-500: #800644;
    --sv-maroon-100: #F6E4E8;
    --sv-maroon-50: #FCEBF4;

    --sv-gold-900: #8A5A12;
    --sv-gold-700: #BF9F00;
    --sv-gold-500: #D9A63D;
    --sv-gold-100: #F0E3A5;
    --sv-gold-50: #FBF6E8;

    --sv-teal-900: #7E0E4D;
    --sv-teal-700: #C2186F;
    --sv-teal-500: #DD2080;
    --sv-teal-100: #FCE4F1;
    --sv-teal-50: #FCF0F8;
    --sv-teal-rgb: 194, 24, 111;

    --sv-sage-700: #7C8566;
    --sv-sage-500: #AAB18F;
    --sv-sage-100: #EEF0E7;

    --sv-green-900: #0B7A31;
    --sv-green-700: #0E9A3D;
    --sv-green-500: #12B742;
    --sv-green-100: #DFF6E7;
    --sv-green-50: #EFFBF3;
    --sv-green-rgb: 14, 154, 61;

    --sv-brown-900: #2E2725;
    --sv-brown-700: #493F3E;
    --sv-brown-400: #8A7F7C;
    --sv-brown-100: #E9E4E2;

    /* Neutral */
    --sv-white: #FFFFFF;
    --sv-cream: #FBF9F6;
    --sv-black: #1A1615;

    /* Semantic */
    --sv-success: var(--sv-green-700);
    --sv-success-100: var(--sv-green-100);
    --sv-warning: #B8862E;
    --sv-warning-100: #F7EDDB;
    --sv-error: #A3352E;
    --sv-error-100: #F6E4E8;
    --sv-info: #3E6B8A;

    /* Typography */
    --font-display: "Montserrat", Arial, sans-serif;
    --font-body: "DM Sans", "Montserrat", Arial, Helvetica, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

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

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(26, 22, 21, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 22, 21, 0.08);
    --shadow-lg: 0 12px 32px rgba(26, 22, 21, 0.12);
    --shadow-accent: 0 8px 24px rgba(194, 24, 111, 0.28);

    /* Breakpoints */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --content-max: 1200px;

    /* Bootstrap overrides mapped to brand tokens */
    --bs-primary: var(--sv-maroon-700);
    --bs-primary-rgb: 113, 4, 60;
    --bs-link-color: var(--sv-maroon-700);
    --bs-link-hover-color: var(--sv-maroon-900);
    --bs-success: var(--sv-success);
    --bs-success-rgb: 14, 154, 61;
    --bs-danger: var(--sv-error);
    --bs-danger-rgb: 163, 53, 46;
    --bs-warning: var(--sv-warning);
    --bs-warning-rgb: 191, 159, 0;
    --bs-info: var(--sv-info);
    --bs-body-bg: var(--sv-cream);
    --bs-body-color: var(--sv-brown-900);
    --bs-tertiary-bg: var(--sv-cream);
    --bs-tertiary-bg-rgb: 251, 249, 246;
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--sv-brown-100);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-md);
    --bs-focus-ring-color: rgba(var(--sv-teal-rgb), 0.22);
    --bs-focus-ring-width: 0.2rem;

    /* Resolved surface/text helpers used across components */
    --sv-bg: var(--sv-cream);
    --sv-surface: var(--sv-white);
    --sv-text: var(--sv-brown-900);
    --sv-muted: var(--sv-brown-400);
    --sv-brown-200: #DDD6D3;
    --sv-brown-300: #C4BCB9;
    --sv-danger: var(--sv-error);
    --sv-accent: var(--sv-teal-500);
    --app-header-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--sv-cream);
    color: var(--sv-brown-900);
    font-family: var(--font-body);
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: var(--font-display);
    color: var(--sv-brown-700);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--sv-maroon-700);
    --bs-btn-border-color: var(--sv-maroon-700);
    --bs-btn-hover-bg: var(--sv-maroon-900);
    --bs-btn-hover-border-color: var(--sv-maroon-900);
    --bs-btn-active-bg: var(--sv-maroon-900);
    --bs-btn-active-border-color: var(--sv-maroon-900);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-font-weight: 600;
}

.btn-outline-secondary {
    --bs-btn-color: var(--sv-brown-700);
    --bs-btn-border-color: var(--sv-brown-400);
    --bs-btn-hover-bg: var(--sv-brown-100);
    --bs-btn-hover-border-color: var(--sv-brown-700);
    --bs-btn-hover-color: var(--sv-brown-900);
    --bs-btn-active-bg: var(--sv-brown-100);
    --bs-btn-active-border-color: var(--sv-brown-700);
    --bs-btn-active-color: var(--sv-brown-900);
    --bs-btn-font-weight: 600;
}

.btn {
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1.15rem;
    font-weight: 600;
    border-radius: 999px; /* pill buttons per app feel */
}

.btn-sm {
    --bs-btn-padding-y: 0.4rem;
    --bs-btn-padding-x: 0.9rem;
    border-radius: 999px;
}

.btn-lg {
    --bs-btn-padding-y: 0.8rem;
    --bs-btn-padding-x: 1.6rem;
}

.btn-link {
    --bs-btn-font-weight: 600;
    text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

.text-primary { color: var(--sv-maroon-700) !important; }
.text-secondary { color: var(--sv-brown-400) !important; }
.bg-body-tertiary { background: var(--sv-cream); }

/* Forms: visible labels, 44px targets, soft focus */
.form-label { font-weight: 500; color: var(--sv-brown-700); margin-bottom: 0.4rem; }

.form-control, .form-select {
    min-height: 48px;
    border-radius: var(--radius-sm);
    border-color: var(--sv-brown-100);
    background: var(--sv-white);
    font-size: var(--text-base);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--sv-teal-500);
    box-shadow: 0 0 0 0.2rem rgba(var(--sv-teal-rgb), 0.16);
}

.form-text { color: var(--sv-brown-400); }

/* Brand lockup */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--sv-brown-700);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.brand-mark img { height: 36px; width: auto; }
.brand-mark .brand-accent { color: var(--sv-maroon-700); }

/* ============ Dark mode ============
   A dedicated dark palette rather than naive inversion. Surfaces stay
   cohesive: warm near-black background, warm charcoal surfaces, soft
   borders and brightened tints. No element should end up light-on-dark
   by accident, so every surface token resolves to a dark value here. */
[data-theme="dark"] {
    color-scheme: dark;

    /* Backgrounds */
    --sv-white: #1E1A19;   /* main surface: cards, inputs, navbar */
    --sv-cream: #20212C;   /* page background */
    --sv-black: #0C0B0B;   /* deepest layer */

    /* Text */
    --sv-brown-900: #F5F2F0;  /* primary body text */
    --sv-brown-700: #E9E4E0;  /* headings */
    --sv-brown-400: #A99F99;  /* muted text */
    --sv-brown-100: #3A3533;  /* borders */

    /* Resolved surface/text helpers follow the dark palette */
    --sv-bg: var(--sv-cream);
    --sv-surface: var(--sv-white);
    --sv-text: var(--sv-brown-900);
    --sv-muted: var(--sv-brown-400);
    --sv-brown-200: #4A4543;
    --sv-brown-300: #57504D;
    --sv-danger: var(--sv-error);

    /* Tints brighten on dark so chips, badges and toasts stay legible.
       Scale order is preserved: 900 = deepest, 100 = softest. */
    --sv-maroon-100: #3E222B;
    --sv-maroon-700: #C96A8E;
    --sv-maroon-500: #D98AA9;
    --sv-maroon-900: #8A3A55;
    --sv-maroon-50: #452533;
    --sv-gold-100: #3B2F1A;
    --sv-gold-700: #D8B84A;
    --sv-gold-500: #EDCE80;
    --sv-gold-900: #7A521A;
    --sv-gold-50: #3B2F1A;
    --sv-teal-100: #3A1E2E;
    --sv-teal-700: #E0509B;
    --sv-teal-500: #EC7DBB;
    --sv-teal-900: #7E1A52;
    --sv-teal-50: #2A1722;
    --sv-sage-100: #2A3324;
    --sv-sage-700: #B7BD9E;
    --sv-sage-500: #C7CCA7;
    --sv-green-100: #15331F;
    --sv-green-700: #3BCF6E;
    --sv-green-500: #58D07E;
    --sv-green-900: #0B7A31;
    --sv-green-50: #12291A;
    --sv-success-100: var(--sv-green-100);
    --sv-success: var(--sv-green-500);
    --sv-warning-100: #3B2F1A;
    --sv-warning: #D8B26A;
    --sv-error-100: #3D2326;
    --sv-error: #E07A7A;

    /* Shadows deepen so cards lift off the dark page */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 8px 26px rgb(221, 32, 128, 0.28);

    /* Bootstrap variables so its components follow the dark theme */
    --bs-body-bg: var(--sv-cream);
    --bs-body-color: var(--sv-brown-900);
    --bs-body-color-rgb: 245, 242, 240;
    --bs-secondary-color: var(--sv-brown-400);
    --bs-secondary-bg: var(--sv-cream);
    --bs-secondary-bg-rgb: 30, 26, 25;
    --bs-tertiary-bg: var(--sv-cream);
    --bs-tertiary-bg-rgb: 20, 18, 18;
    --bs-border-color: var(--sv-brown-100);
    --bs-emphasis-color: var(--sv-brown-700);
    --bs-link-color: var(--sv-maroon-500);
    --bs-link-hover-color: var(--sv-maroon-700);
}
[data-theme="dark"] body {
    background: var(--sv-cream);
    color: var(--sv-brown-900);
}
[data-theme="dark"] .bg-body-tertiary { background: var(--sv-cream); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    color: var(--sv-brown-900);
    background: var(--sv-white);
    border-color: var(--sv-brown-100);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--sv-white);
    color: var(--sv-brown-900);
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder {
    color: var(--sv-brown-400);
}
[data-theme="dark"] a,
[data-theme="dark"] .auth-card a { color: var(--sv-maroon-500); }
[data-theme="dark"] a:hover,
[data-theme="dark"] .auth-card a:hover { color: var(--sv-maroon-700); }
[data-theme="dark"] .brand-mark { color: var(--sv-brown-700); }
[data-theme="dark"] .brand-accent { color: var(--sv-maroon-500); }
[data-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--sv-maroon-700);
    --bs-btn-border-color: var(--sv-maroon-700);
    --bs-btn-hover-bg: var(--sv-maroon-500);
    --bs-btn-hover-border-color: var(--sv-maroon-500);
    --bs-btn-active-bg: var(--sv-maroon-500);
    --bs-btn-active-border-color: var(--sv-maroon-500);
    --bs-btn-color: #1E1216;
    --bs-btn-hover-color: #1E1216;
    --bs-btn-active-color: #1E1216;
}
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-light {
    --bs-btn-color: var(--sv-brown-700);
    --bs-btn-border-color: var(--sv-brown-100);
    --bs-btn-bg: var(--sv-white);
    --bs-btn-hover-bg: var(--sv-cream);
    --bs-btn-hover-border-color: var(--sv-maroon-500);
    --bs-btn-hover-color: var(--sv-maroon-700);
    --bs-btn-active-bg: var(--sv-cream);
    --bs-btn-active-border-color: var(--sv-maroon-500);
    --bs-btn-active-color: var(--sv-maroon-700);
}
[data-theme="dark"] .sv-navbar .btn, 
[data-theme="dark"] a.btn { --bs-btn-color: var(--sv-brown-700) !important; }