/* =====================================================
   tercio-ia — custom theme (light & dark palettes)
   Overrides Bootstrap 5 CSS variables.

   To disable: comment out the <link> tag in your HTML.
   To tweak colors: edit the variables in :root below.
   ===================================================== */

/* ── Palette knobs ─────────────────────────────────────
   These are the only values you need to touch.
   All theme rules below reference these variables.
   ──────────────────────────────────────────────────── */

:root {
    /* Accent / primary color — Gruvbox bright orange */
    --t-accent: #fe8019;
    --t-accent-rgb: 254, 128, 25;
    --t-accent-hover: #d65d0e;
    --t-accent-active: #af3a03; /* pressed/active state   */

    /* Font */
    --bs-body-font-family: "League Spartan", sans-serif;

    /* Focus ring (Bootstrap reads this directly from :root) */
    --bs-focus-ring-color: rgba(var(--t-accent-rgb), 0.25);

    /* Dark palette — Gruvbox dark */
    --t-dark-bg: #1d2021; /* page background  (gruvbox hard dark) */
    --t-dark-surface: #282828; /* cards, panels    (gruvbox bg)        */
    --t-dark-surface-2: #3c3836; /* hover states     (gruvbox bg1)       */
    --t-dark-border: #504945; /* borders          (gruvbox bg2)       */
    --t-dark-text: #ebdbb2; /* primary text     (gruvbox fg)        */
    --t-dark-text-muted: #a89984; /* muted text       (gruvbox fg4)       */

    /* Light palette — Gruvbox light */
    --t-light-bg: #f9f5d7; /* page background  (gruvbox hard light) */
    --t-light-surface: #fbf1c7; /* cards, panels    (gruvbox bg)         */
    --t-light-surface-2: #ebdbb2; /* hover states     (gruvbox bg1)        */
    --t-light-border: #d5c4a1; /* borders          (gruvbox bg2)        */
    --t-light-text: #3c3836; /* primary text     (gruvbox fg1)        */
    --t-light-text-muted: #7c6f64; /* muted text       (gruvbox fg3)        */
}

/* ── Dark theme ─────────────────────────────────────── */

[data-bs-theme="dark"] {
    --bs-primary: var(--t-accent);
    --bs-primary-rgb: var(--t-accent-rgb);

    --bs-body-bg: var(--t-dark-bg);
    --bs-body-bg-rgb: 17, 17, 24;
    --bs-body-color: var(--t-dark-text);
    --bs-body-color-rgb: 232, 230, 245;

    --bs-secondary-bg: var(--t-dark-surface);
    --bs-secondary-bg-rgb: 26, 26, 38;
    --bs-tertiary-bg: var(--t-dark-surface-2);
    --bs-tertiary-bg-rgb: 34, 34, 58;

    --bs-secondary-color: var(--t-dark-text-muted);
    --bs-tertiary-color: var(--t-dark-text-muted);
    --bs-emphasis-color: #ffffff;

    --bs-border-color: var(--t-dark-border);
    --bs-border-color-translucent: rgba(46, 46, 74, 0.5);

    --bs-link-color: var(--t-accent);
    --bs-link-color-rgb: var(--t-accent-rgb);
    --bs-link-hover-color: var(--t-accent-hover);
}

/* ── Component overrides ─────────────────────────────
   Bootstrap hardcodes some colors as component-level
   CSS variables instead of reading from --bs-primary,
   so we must override them here explicitly.
   ──────────────────────────────────────────────────── */

/* .btn-primary */
.btn-primary {
    --bs-btn-bg: var(--t-accent);
    --bs-btn-border-color: var(--t-accent);
    --bs-btn-hover-bg: var(--t-accent-hover);
    --bs-btn-hover-border-color: var(--t-accent-hover);
    --bs-btn-active-bg: var(--t-accent-active);
    --bs-btn-active-border-color: var(--t-accent-active);
    --bs-btn-disabled-bg: var(--t-accent);
    --bs-btn-disabled-border-color: var(--t-accent);
    --bs-btn-focus-shadow-rgb: var(--t-accent-rgb);
}

/* .btn-outline-primary */
.btn-outline-primary {
    --bs-btn-color: var(--t-accent);
    --bs-btn-border-color: var(--t-accent);
    --bs-btn-hover-bg: var(--t-accent);
    --bs-btn-hover-border-color: var(--t-accent);
    --bs-btn-active-bg: var(--t-accent-hover);
    --bs-btn-active-border-color: var(--t-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--t-accent-rgb);
}

/* .badge.text-bg-primary */
.text-bg-primary {
    background-color: var(--t-accent) !important;
}

/* .nav-pills .nav-link.active */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--t-accent);
}

/* ── Light theme ────────────────────────────────────── */

[data-bs-theme="light"] {
    --bs-primary: var(--t-accent);
    --bs-primary-rgb: var(--t-accent-rgb);

    --bs-body-bg: var(--t-light-bg);
    --bs-body-bg-rgb: 244, 243, 255;
    --bs-body-color: var(--t-light-text);
    --bs-body-color-rgb: 26, 24, 48;

    --bs-secondary-bg: var(--t-light-surface);
    --bs-secondary-bg-rgb: 255, 255, 255;
    --bs-tertiary-bg: var(--t-light-surface-2);
    --bs-tertiary-bg-rgb: 235, 233, 251;

    --bs-secondary-color: var(--t-light-text-muted);
    --bs-tertiary-color: var(--t-light-text-muted);
    --bs-emphasis-color: #000000;

    --bs-border-color: var(--t-light-border);
    --bs-border-color-translucent: rgba(208, 205, 245, 0.5);

    --bs-link-color: var(--t-accent);
    --bs-link-color-rgb: var(--t-accent-rgb);
    --bs-link-hover-color: var(--t-accent-hover);
}