html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ===== Alpha brand themes (uses #e35618 / #eb980e / #171918 / #fdfcf8) ===== */

/* Default before JS loads */
:root {
    --brand: #e35618;
    --brand-2: #eb980e;
    --brand-hover: #d54b13;
    --ink: #171918;
    --ink-muted: #565a5d;
    --bg: #fdfcf8;
    --card: #ffffff;
    --border: #e9e4dc;
    --stroke: #e9e4dc;
}

/* 1) Alpha Light — off?white surfaces with hot CTAs */
.theme-alpha-light {
    --brand: #e35618; /* primary */
    --brand-2: #eb980e; /* secondary accent */
    --brand-hover: #cf4a16;
    --ink: #171918;
    --ink-muted: #5c6266;
    --bg: #fdfcf8; /* page background */
    --card: #ffffff; /* panels/cards */
    --border: #e9e4dc; /* warm border */
    --stroke: #e9e4dc;
}

/* 2) Alpha Warm — subtle washed orange UI */
.theme-alpha-warm {
    --brand: #e35618;
    --brand-2: #eb980e;
    --brand-hover: #c34414;
    --ink: #1f2123;
    --ink-muted: #555b60;
    --bg: #fff6ed; /* gentle warm canvas */
    --card: #fffaf3; /* warmer cards */
    --border: #f3e5d4;
    --stroke: #f3e5d4;
}

/* 3) Alpha Dark — black/graphite with orange highlights */
.theme-alpha-dark {
    --brand: #eb980e;
    --brand-2: #e35618;
    --brand-hover: #d8850b;
    --ink: #f0f1f2;
    --ink-muted: #c4c8cc;
    --bg: #171918;
    --card: #1f2123;
    --border: #2b2e31;
    --stroke: #2b2e31;
}

/* 4) Alpha Contrast — off?white base, dark header feel */
.theme-alpha-contrast {
    --brand: #eb980e;
    --brand-2: #e35618;
    --brand-hover: #d8850b;
    --ink: #171918;
    --ink-muted: #4c5155;
    --bg: #fbf7ef;
    --card: #fefefe;
    --border: #e6e0d6;
    --stroke: #e6e0d6;
}

/* Utilities (keep these if you already added them) */
@layer utilities {
    .bg-bg {
        background-color: var(--bg);
    }

    .bg-card {
        background-color: var(--card);
    }

    .border-theme {
        border-color: var(--border);
    }

    .text-ink {
        color: var(--ink);
    }

    .text-ink-muted {
        color: var(--ink-muted);
    }

    .text-brand {
        color: var(--brand);
    }

    .ring-brand {
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);
    }

    .btn-primary {
        @apply inline-flex items-center justify-center rounded-md font-semibold px-5 py-3;
        color: #111;
        background: var(--brand);
    }

        .btn-primary:hover {
            background: var(--brand-hover);
        }

    /* On?brand gradient button */
    .btn-ember {
        @apply inline-flex items-center justify-center rounded-md font-semibold px-5 py-3;
        color: #111;
        background-image: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
    }

    .btn-ember {
        box-shadow: 0 8px 20px rgba(0,0,0,.15);
    }

        .btn-ember:focus {
            outline: none;
            box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 35%, transparent);
        }

        .btn-ember:hover {
            filter: brightness(0.95);
        }

    /* Hero gradient background */
    .bg-brand-ember {
        background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    }
}

a.link-brand {
    color: var(--brand);
}

    a.link-brand:hover {
        color: var(--brand-2);
    }

input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);
    border-color: var(--brand);
}

.tab-link {
    color: #e6e7eb;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    background: #2a2d30;
    border-radius: .25rem;
    transition: all .15s ease;
}

    .tab-link:hover {
        border-color: var(--brand);
        color: #fff;
    }

.bordered {
    position: relative;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

    .bordered::before {
        content: "";
        position: absolute;
        left: -1px;
        right: -1px;
        top: -1px;
        height: 5px;
        background: linear-gradient(90deg,var(--brand) 0%, var(--brand-2) 100%);
        border-top-left-radius: .75rem;
        border-top-right-radius: .75rem;
    }

:root {
    --brand-orange: #ff7a00;
    --brand-dark: #0f1115;
    --brand-grad-from: #ff7a00;
    --brand-grad-to: #ff3d00;
}