/* =========================================================
   variables.css — Centralized Design Tokens (Light + Dark)
   Single source of truth for ALL colors across the project.
   ========================================================= */

/* ============ LIGHT MODE (default) ============ */
:root {
    /* ---- Brand Colors ---- */
    --brand-green: #277245;
    --brand-green-2: #206d3d;
    --brand-gold: #b48e63;
    --brand-ivory: #fbfaf7;
    --brand-sand: #dacab6;

    /* ---- Semantic Colors ---- */
    --ink: #0f172a;
    --muted: #64748b;
    --card: #ffffff;
    --page-bg: #fbfaf7; /* original brand ivory — kept */
    --surface-2: #f6f3eb; /* secondary surface (nested panels) */
    --surface-3: #faf8f1; /* tertiary surface (subtle highlights)  */

    /* ---- Borders — brand-green tinted (echoes the dark-mode identity) ---- */
    --line: rgba(39, 114, 69, 0.32);
    --line-strong: rgba(39, 114, 69, 0.55);

    /* Gradient-transparency border system (padding-box / border-box technique)
       Width: 3px. Top-left of the card is strong brand-green, fading toward
       a soft tint at bottom-right. Works with border-radius (unlike border-image). */
    --card-border-w: 3px;
    --card-border: var(--card-border-w) solid transparent;
    --card-grad-from: rgba(39, 114, 69, 0.7);
    --card-grad-mid: rgba(39, 114, 69, 0.35);
    --card-grad-to: rgba(39, 114, 69, 0.12);
    --card-bg-stack:
        linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(
                135deg,
                var(--card-grad-from) 0%,
                var(--card-grad-mid) 55%,
                var(--card-grad-to) 100%
            )
            border-box;
    --card-bg-stack-hover:
        linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(
                135deg,
                var(--brand-green) 0%,
                rgba(39, 114, 69, 0.6) 55%,
                rgba(39, 114, 69, 0.25) 100%
            )
            border-box;

    /* ---- Elevation system (Tailwind/Linear/Stripe-style multi-layer) ---- */
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-sm:
        0 1px 3px 0 rgba(15, 23, 42, 0.08),
        0 1px 2px -1px rgba(15, 23, 42, 0.05);
    --shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.08),
        0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-md:
        0 10px 15px -3px rgba(15, 23, 42, 0.1),
        0 4px 6px -4px rgba(15, 23, 42, 0.06);
    --shadow-lg:
        0 20px 25px -5px rgba(15, 23, 42, 0.12),
        0 8px 10px -6px rgba(15, 23, 42, 0.06);

    --radius: 16px;
    --radius-sm: 12px;
    --radius-pill: 999px;

    /* ---- Rings / Glows ---- */
    --ring-green: rgba(39, 114, 69, 0.22);
    --ring-gold: rgba(180, 142, 99, 0.22);

    /* ---- Aliases (backward compat) ---- */
    --primary: var(--brand-green);
    --primary-2: var(--brand-green-2);
    --text-color: var(--ink);
    --muted-color: var(--muted);
    --card-bg: var(--card);

    /* ---- Component Tokens ---- */
    --nav-bg: rgba(255, 255, 255, 0.78);
    --nav-border: rgba(39, 114, 69, 0.22);
    --nav-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

    --sidebar-bg: rgba(255, 255, 255, 0.86);
    --topbar-bg: rgba(255, 255, 255, 0.9);

    --input-bg: #ffffff;
    --input-border: rgba(39, 114, 69, 0.25);
    --input-focus: rgba(39, 114, 69, 0.6);
    --input-ring: rgba(39, 114, 69, 0.14);

    --btn-ghost-bg: rgba(39, 114, 69, 0.08);
    --btn-ghost-bd: rgba(39, 114, 69, 0.3);

    --alert-bg: rgba(180, 142, 99, 0.14);
    --alert-border: rgba(180, 142, 99, 0.36);

    /* ---- Footer ---- */
    --footer-bg: rgba(15, 23, 42, 0.94);
    --footer-text: rgba(255, 255, 255, 0.88);
    --footer-muted: rgba(255, 255, 255, 0.65);
    --footer-card: rgba(255, 255, 255, 0.04);
    --footer-border: rgba(255, 255, 255, 0.06);

    /* ---- Table ---- */
    --table-head-bg: rgba(39, 114, 69, 0.1);
    --table-border: rgba(39, 114, 69, 0.18);
    --table-row-stripe: rgba(39, 114, 69, 0.03);
    --table-row-hover: rgba(39, 114, 69, 0.07);

    /* ---- Body gradient ---- */
    --body-gradient-1: rgba(36, 116, 68, 0.14);
    --body-gradient-2: rgba(180, 140, 100, 0.16);
    --body-base: var(--page-bg);

    /* ---- Selection ---- */
    --selection-bg: rgba(39, 114, 69, 0.18);
}

/* ============ DARK MODE ============ */
[data-theme="dark"] {
    /* ---- Brand Colors (slightly adjusted for dark bg) ---- */
    --brand-green: #34a05c;
    --brand-green-2: #2d8c52;
    --brand-gold: #c9a57f;
    --brand-ivory: #0f1420;
    --brand-sand: #3d3425;

    /* ---- Semantic Colors ---- */
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --card: #1a2030;
    --page-bg: #0f1420;
    --surface-2: #232a3d;
    --surface-3: #2b3349;

    /* ---- Borders ---- */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);

    /* Gradient-transparency border system — adapted for dark surfaces.
       Uses the dark-mode brand-green at lower alpha so it reads against
       dark cards without being harsh. */
    --card-border-w: 2px;
    --card-border: var(--card-border-w) solid transparent;
    --card-grad-from: rgba(52, 160, 92, 0.55);
    --card-grad-mid: rgba(52, 160, 92, 0.25);
    --card-grad-to: rgba(52, 160, 92, 0.08);
    --card-bg-stack:
        linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(
                135deg,
                var(--card-grad-from) 0%,
                var(--card-grad-mid) 55%,
                var(--card-grad-to) 100%
            )
            border-box;
    --card-bg-stack-hover:
        linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(
                135deg,
                var(--brand-green) 0%,
                rgba(52, 160, 92, 0.45) 55%,
                rgba(52, 160, 92, 0.18) 100%
            )
            border-box;

    /* ---- Elevation system ---- */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --shadow-sm:
        0 1px 3px 0 rgba(0, 0, 0, 0.35),
        0 1px 2px -1px rgba(0, 0, 0, 0.25);
    --shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.4),
        0 2px 4px -2px rgba(0, 0, 0, 0.25);
    --shadow-md:
        0 10px 15px -3px rgba(0, 0, 0, 0.45),
        0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-lg:
        0 20px 25px -5px rgba(0, 0, 0, 0.5),
        0 8px 10px -6px rgba(0, 0, 0, 0.35);

    /* ---- Rings / Glows ---- */
    --ring-green: rgba(52, 160, 92, 0.25);
    --ring-gold: rgba(201, 165, 127, 0.2);

    /* ---- Aliases ---- */
    --primary: var(--brand-green);
    --primary-2: var(--brand-green-2);
    --text-color: var(--ink);
    --muted-color: var(--muted);
    --card-bg: var(--card);

    /* ---- Component Tokens ---- */
    --nav-bg: rgba(15, 20, 32, 0.88);
    --nav-border: rgba(52, 160, 92, 0.18);
    --nav-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

    --sidebar-bg: rgba(26, 32, 48, 0.85);
    --topbar-bg: rgba(15, 20, 32, 0.9);

    --input-bg: #1e2636;
    --input-border: rgba(255, 255, 255, 0.12);
    --input-focus: rgba(52, 160, 92, 0.45);
    --input-ring: rgba(52, 160, 92, 0.15);

    --btn-ghost-bg: rgba(52, 160, 92, 0.12);
    --btn-ghost-bd: rgba(52, 160, 92, 0.25);

    --alert-bg: rgba(201, 165, 127, 0.12);
    --alert-border: rgba(201, 165, 127, 0.22);

    /* ---- Footer ---- */
    --footer-bg: rgba(8, 10, 18, 0.96);
    --footer-text: rgba(255, 255, 255, 0.85);
    --footer-muted: rgba(255, 255, 255, 0.55);
    --footer-card: rgba(255, 255, 255, 0.03);
    --footer-border: rgba(255, 255, 255, 0.06);

    /* ---- Table ---- */
    --table-head-bg: rgba(52, 160, 92, 0.1);
    --table-border: rgba(255, 255, 255, 0.06);
    --table-row-stripe: rgba(255, 255, 255, 0.02);
    --table-row-hover: rgba(255, 255, 255, 0.05);

    /* ---- Body gradient ---- */
    --body-gradient-1: rgba(52, 160, 92, 0.08);
    --body-gradient-2: rgba(180, 140, 100, 0.06);
    --body-base: var(--page-bg);

    /* ---- Selection ---- */
    --selection-bg: rgba(52, 160, 92, 0.25);
}