:root {
    /* Design system tokens — see ai/design.md Section 2. Single source of truth for color. */
    --color-bg-mint: #EAF3DE;
    --color-bg-mint-border: #C0DD97;
    --color-ink: #14132B;
    --color-ink-secondary: #444441;
    --color-accent-teal-bg: #9FE1CB;
    --color-accent-teal-text: #04342C;
    --color-surface-white: #FFFFFF;
    --color-border-neutral: #E5E5E0;

    /* Dark brand frame (navbar + footer only) — sourced from the landing page's
       closing CTA section (bg-slate-950/white text). Reuses --color-ink as the
       single dark tone rather than introducing a new color; teal remains the
       only accent on this surface. Workspace surfaces (cards, tables, forms)
       stay on the light tokens above. See ai/design.md Section 3/3.2. */
    --color-surface-dark: var(--color-ink);
    --color-text-on-dark: #FFFFFF;
    --color-text-on-dark-secondary: rgba(255, 255, 255, 0.72);
    --color-border-on-dark: rgba(255, 255, 255, 0.14);

    --bg-page: #f8fafc;
    --surface: var(--color-surface-white);
    --surface-soft: #f8fafc;
    --primary: var(--color-ink);
    --primary-600: #1f2937;
    --primary-500: #334155;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: var(--color-border-neutral);
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: var(--color-ink-secondary);
    --slate-600: #475569;
    --text-main: #1e293b;
    --text-muted: var(--color-ink-secondary);
    --success-soft: #ecfdf5;
    --success-text: #059669;
    --warning-soft: #fef3c7;
    --warning-text: #d97706;
    --danger-soft: #fef2f2;
    --danger-text: #dc2626;
    --info-soft: var(--slate-100);
    --info-text: var(--color-ink-secondary);
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 9999px;
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.02);
    --shadow-medium: 0 12px 30px rgba(15, 23, 42, 0.08);
    --transition-fast: 150ms ease-out;
    --content-max: 72rem;

    /* Semantic theme aliases — see ai/design.md Section 7.1. Light values here,
       overridden under [data-theme="dark"] below. Status soft-backgrounds get a
       dark-safe pairing too so badge/alert text stays legible on a dark surface. */
    --theme-page-bg: var(--bg-page);
    --theme-surface: var(--color-surface-white);
    --theme-surface-elevated: var(--color-surface-white);
    --theme-surface-muted: var(--slate-50);
    --theme-text: var(--text-main);
    --theme-text-secondary: var(--text-muted);
    --theme-border: var(--color-border-neutral);
    --theme-shadow: var(--shadow-soft);
    --theme-input-bg: var(--color-surface-white);
    --theme-hover: var(--slate-50);
    --theme-progress-track: var(--slate-200);

    --theme-success-soft: var(--success-soft);
    --theme-warning-soft: var(--warning-soft);
    --theme-danger-soft: var(--danger-soft);
}

[data-theme="dark"] {
    --bg-page: #0E0D20;
    --surface: #17162E;
    --surface-soft: #1B1A38;
    --color-surface-white: #17162E;
    --color-border-neutral: #2A2945;
    --slate-50: #1B1A38;
    --slate-100: #201F3D;
    --slate-200: #2A2945;
    --slate-300: #3A3958;
    --slate-400: #5A5878;
    --slate-500: #8A889E;
    --slate-600: #C9C8D6;
    --text-main: #FFFFFF;
    --text-muted: #8A889E;
    --color-ink-secondary: #C9C8D6;
    --primary: #FFFFFF;
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.24);
    --shadow-medium: 0 12px 30px rgba(0, 0, 0, 0.4);

    --theme-page-bg: var(--bg-page);
    --theme-surface: var(--surface);
    --theme-surface-elevated: #1B1A38;
    --theme-surface-muted: rgba(255, 255, 255, 0.04);
    --theme-text: var(--text-main);
    --theme-text-secondary: var(--text-muted);
    --theme-border: var(--color-border-neutral);
    --theme-shadow: var(--shadow-soft);
    --theme-input-bg: #201F3D;
    --theme-hover: rgba(255, 255, 255, 0.05);
    --theme-progress-track: #2A2945;

    --theme-success-soft: rgba(29, 158, 117, 0.16);
    --theme-warning-soft: rgba(214, 154, 60, 0.16);
    --theme-danger-soft: rgba(220, 38, 38, 0.18);
    --success-soft: var(--theme-success-soft);
    --warning-soft: var(--theme-warning-soft);
    --danger-soft: var(--theme-danger-soft);
    --success-text: #5AD3A8;
    --warning-text: #D69A3C;
    --danger-text: #F87171;
    --info-soft: var(--slate-100);
    --info-text: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

/* Dark brand frame: ink outline is invisible on ink background. */
.nav-shell :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--color-text-on-dark);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-page);
    color: var(--text-main);
}

.app-body {
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--text-main);
}

.app-shell {
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--text-main);
}

/* Theme switch: a short color transition, never a page-wide animated transition. */
body,
.app-body,
.app-shell,
.panel-card,
.stat-card,
.modern-card,
.summary-card,
.section-card,
.form-card,
.page-side-card,
.table-card,
.form-control,
.form-select {
    transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}

.page-shell {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

a {
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

::selection {
    background: rgba(15, 23, 42, 0.12);
    color: var(--theme-text);
}

[data-theme="dark"] ::selection {
    background: rgba(159, 225, 203, 0.25);
}

/* Bootstrap's .text-dark/.text-muted utilities are fixed colors (not theme-aware) and
   ship with !important, so they need an explicit dark-mode override to stay legible
   against the dark card surfaces instead of disappearing near-black-on-near-black. */
[data-theme="dark"] .text-dark {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--theme-text-secondary) !important;
}

/* Same problem as .text-dark/.text-muted above: Bootstrap's .bg-white/.bg-light
   utilities are fixed colors with !important, so raw white/light-gray panels
   used directly in markup (not via .card) need an explicit dark override. */
[data-theme="dark"] .bg-white {
    background-color: var(--theme-surface) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}

/* Tailwind's .text-ink utility is a fixed color too (compiled at build time from
   tailwind.config.js), so it needs the same dark-mode override as the Bootstrap
   text utilities above. */
[data-theme="dark"] .text-ink {
    color: var(--theme-text) !important;
}

/* Minimum practical touch target for the navbar theme toggle; focus ring needs to
   survive on the dark brand frame, matching the nav-shell/site-footer override above. */
.theme-toggle {
    min-width: 2rem;
    min-height: 2rem;
}

[data-theme="dark"] :focus-visible {
    outline-color: var(--color-accent-teal-bg);
}

.text-surface {
    color: var(--surface) !important;
}

.text-main {
    color: var(--text-main) !important;
}

.text-muted-soft {
    color: var(--text-muted) !important;
}

.bg-page {
    background: var(--bg-page) !important;
}

.bg-surface {
    background: var(--surface) !important;
}

.border-surface {
    border-color: var(--slate-200) !important;
}

.shadow-soft {
    box-shadow: var(--shadow-soft) !important;
}

.shadow-medium {
    box-shadow: var(--shadow-medium) !important;
}

/* Temporary compatibility layer for pages that still use the existing orders table styling. */
.orders-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.orders-table thead th {
    border: none;
    background: transparent;
    color: var(--theme-text-secondary);
    font-weight: 600;
    font-size: .9rem;
}

.orders-table tbody tr {
    background: var(--theme-surface);
    border-radius: .35rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.orders-table tbody tr td {
    vertical-align: middle;
    border: none;
    color: var(--theme-text);
}

.orders-table td.package {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-table td.package .fw-semibold {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-table td.price {
    width: 140px;
    font-weight: 600;
}

.orders-table td.actions-cell {
    white-space: nowrap;
    width: 170px;
}

.orders-table .badge {
    font-size: .75rem;
    padding: .45em .6em;
    border-radius: 999px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .55rem;
    gap: .4rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .32rem .5rem;
}

.btn-icon svg {
    width: .95rem;
    height: .95rem;
}

.orders-table tbody tr:hover {
    transform: translateY(-2px);
    transition: .12s ease;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

@media (max-width: 767px) {
    .orders-table td.package {
        max-width: 60%;
    }

    .orders-table td.actions-cell {
        width: auto;
    }
}

/* Forms baseline: unify Bootstrap form-control/select/check focus + disabled states with the design tokens. */
.form-control,
.form-select {
    background-color: var(--theme-input-bg);
    color: var(--theme-text);
    border-color: var(--color-border-neutral);
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--theme-input-bg);
    color: var(--theme-text);
    border-color: var(--color-ink);
    box-shadow: none;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--color-accent-teal-bg);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--slate-50);
    opacity: .75;
}

.form-control::placeholder {
    color: var(--theme-text-secondary);
    opacity: .65;
}

.form-check-input {
    background-color: var(--theme-input-bg);
    border-color: var(--color-border-neutral);
}

.form-check-input:checked {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
}

.form-check-input:focus {
    border-color: var(--color-ink);
    box-shadow: none;
}

.form-label,
.form-text {
    color: var(--color-ink-secondary);
}

/* Bootstrap dropdown / modal / pagination / alert defaults are hardcoded white —
   theme them off the same surface tokens as everything else. */
.dropdown-menu {
    background-color: var(--theme-surface-elevated);
    color: var(--theme-text);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
}

.dropdown-item {
    color: var(--theme-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--theme-hover);
    color: var(--theme-text);
}

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

.dropdown-item-text,
.dropdown-menu .bg-light {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text);
}

.modal-content {
    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

.modal-header,
.modal-footer {
    border-color: var(--theme-border);
}

.pagination .page-link {
    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

.pagination .page-link:hover {
    background-color: var(--theme-hover);
    color: var(--theme-text);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--theme-surface-muted);
    color: var(--theme-text-secondary);
}

.alert {
    border: 1px solid var(--theme-border);
}

.alert-warning {
    background-color: var(--theme-warning-soft);
    color: var(--warning-text);
}

.alert-success {
    background-color: var(--theme-success-soft);
    color: var(--success-text);
}

.alert-danger {
    background-color: var(--theme-danger-soft);
    color: var(--danger-text);
}

.card {
    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

.badge.bg-light {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
}

.badge.bg-white {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

.invalid-feedback {
    color: var(--danger-text);
}

.is-invalid.form-control,
.is-invalid.form-select {
    border-color: var(--danger-text);
}

/* Tables baseline: consistent density/header treatment for any Bootstrap table not already using .table-modern/.orders-table. */
.table {
    color: var(--text-main);
}

.table > thead > tr > th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-ink-secondary);
    border-bottom-color: var(--color-border-neutral);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--color-border-neutral);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--slate-50);
}