/* TexTeam foundations. Brand constants never change with the UI theme. */
:root,
[data-bs-theme="light"] {
    color-scheme: light;
    --tt-brand-graphite: #171717;
    --tt-brand-white: #ffffff;
    --tt-brand-sand: #f3f0eb;
    --tt-brand-blue: #2d5f9a;
    --tt-brand-sale: #a33a32;

    --tt-font-sans: Arial, Helvetica, sans-serif;
    --tt-font-size-xs: .75rem;
    --tt-font-size-sm: .875rem;
    --tt-font-size-base: 1rem;
    --tt-font-size-lg: 1.125rem;
    --tt-font-size-display: clamp(2.75rem, 6vw, 6.5rem);
    --tt-font-size-section: clamp(2rem, 4vw, 4.25rem);
    --tt-space-1: .25rem;
    --tt-space-2: .5rem;
    --tt-space-3: .75rem;
    --tt-space-4: 1rem;
    --tt-space-5: 1.5rem;
    --tt-space-6: 2rem;
    --tt-space-7: 3rem;
    --tt-space-8: 4.5rem;
    --tt-space-9: 6rem;
    --tt-radius-sm: .25rem;
    --tt-radius-md: .5rem;
    --tt-radius-lg: .75rem;
    --tt-shell-gutter: clamp(1rem, 3vw, 3rem);
    --tt-shell-max: 96rem;
    --tt-app-shell-max: 1600px;
    --tt-transition-fast: 160ms ease;
    --tt-transition-base: 260ms ease;

    --tt-bg: var(--tt-brand-white);
    --tt-surface: var(--tt-brand-white);
    --tt-surface-muted: var(--tt-brand-sand);
    --tt-surface-hover: #eae5dd;
    --tt-text: var(--tt-brand-graphite);
    --tt-text-rgb: 23, 23, 23;
    --tt-text-muted: #68635d;
    --tt-border: #d8d3cc;
    --tt-link: var(--tt-brand-blue);
    --tt-link-rgb: 45, 95, 154;
    --tt-link-hover: #204873;
    --tt-focus: var(--tt-brand-blue);
    --tt-action: var(--tt-brand-graphite);
    --tt-action-rgb: 23, 23, 23;
    --tt-action-hover: #34322f;
    --tt-on-action: var(--tt-brand-white);
    --tt-shadow: 0 .5rem 1.5rem rgba(23, 23, 23, .08);
    --tt-header-bg: rgba(255, 255, 255, .96);

    --bs-primary: var(--tt-action);
    --bs-primary-rgb: var(--tt-action-rgb);
    --bs-secondary: #68635d;
    --bs-secondary-rgb: 104, 99, 93;
    --bs-success: #267344;
    --bs-success-rgb: 38, 115, 68;
    --bs-danger: #a33a32;
    --bs-danger-rgb: 163, 58, 50;
    --bs-warning: #d19b36;
    --bs-warning-rgb: 209, 155, 54;
    --bs-info: #24647b;
    --bs-info-rgb: 36, 100, 123;
    --bs-body-font-family: var(--tt-font-sans);
    --bs-body-bg: var(--tt-bg);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--tt-text);
    --bs-body-color-rgb: var(--tt-text-rgb);
    --bs-emphasis-color: var(--tt-text);
    --bs-emphasis-color-rgb: var(--tt-text-rgb);
    --bs-secondary-color: var(--tt-text-muted);
    --bs-secondary-color-rgb: 104, 99, 93;
    --bs-secondary-bg: var(--tt-surface-muted);
    --bs-secondary-bg-rgb: 243, 240, 235;
    --bs-tertiary-color: var(--tt-text-muted);
    --bs-tertiary-bg: var(--tt-surface-muted);
    --bs-tertiary-bg-rgb: 243, 240, 235;
    --bs-heading-color: var(--tt-text);
    --bs-link-color: var(--tt-link);
    --bs-link-color-rgb: var(--tt-link-rgb);
    --bs-link-hover-color: var(--tt-link-hover);
    --bs-link-hover-color-rgb: 32, 72, 115;
    --bs-border-color: var(--tt-border);
    --bs-border-color-translucent: var(--tt-border);
    --bs-border-radius: var(--tt-radius-sm);
    --bs-border-radius-sm: var(--tt-radius-sm);
    --bs-border-radius-lg: var(--tt-radius-md);
    --bs-border-radius-xl: var(--tt-radius-lg);
    --bs-box-shadow: var(--tt-shadow);
    --bs-focus-ring-color: rgba(45, 95, 154, .25);
    --bs-primary-text-emphasis: var(--tt-text);
    --bs-primary-bg-subtle: var(--tt-surface-muted);
    --bs-primary-border-subtle: var(--tt-border);
    --bs-secondary-text-emphasis: var(--tt-text-muted);
    --bs-secondary-bg-subtle: var(--tt-surface-muted);
    --bs-secondary-border-subtle: var(--tt-border);
    --bs-success-text-emphasis: #215d38;
    --bs-success-bg-subtle: #edf6ef;
    --bs-success-border-subtle: #b4d2bd;
    --bs-danger-text-emphasis: #8c2f28;
    --bs-danger-bg-subtle: #faeeec;
    --bs-danger-border-subtle: #e4b4ae;
    --bs-warning-text-emphasis: #78520f;
    --bs-warning-bg-subtle: #fcf4e3;
    --bs-warning-border-subtle: #e5cc98;
    --bs-info-text-emphasis: #22596b;
    --bs-info-bg-subtle: #edf5f8;
    --bs-info-border-subtle: #b6d2dc;

    /* Compatibility for existing storefront components; these are semantic. */
    --tt-color-ink: var(--tt-text);
    --tt-color-paper: var(--tt-surface);
    --tt-color-sand: var(--tt-surface-muted);
    --tt-color-line: var(--tt-border);
    --tt-color-muted: var(--tt-text-muted);
    --tt-color-sale: var(--tt-brand-sale);
    --tt-color-focus: var(--tt-focus);
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    --tt-bg: var(--tt-brand-graphite);
    --tt-surface: #222220;
    --tt-surface-muted: #2d2c29;
    --tt-surface-hover: #383632;
    --tt-text: var(--tt-brand-sand);
    --tt-text-rgb: 243, 240, 235;
    --tt-text-muted: #b9b4ac;
    --tt-border: #48443e;
    --tt-link: #91b9eb;
    --tt-link-rgb: 145, 185, 235;
    --tt-link-hover: #bbd4f3;
    --tt-focus: #91b9eb;
    --tt-action: var(--tt-brand-sand);
    --tt-action-rgb: 243, 240, 235;
    --tt-action-hover: #ddd6ca;
    --tt-on-action: var(--tt-brand-graphite);
    --tt-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .24);
    --tt-header-bg: rgba(34, 34, 32, .96);
    --bs-body-bg-rgb: 23, 23, 23;
    --bs-secondary-color-rgb: 185, 180, 172;
    --bs-secondary-bg-rgb: 45, 44, 41;
    --bs-tertiary-bg-rgb: 45, 44, 41;
    --bs-link-hover-color-rgb: 187, 212, 243;
    --bs-focus-ring-color: rgba(145, 185, 235, .3);
    --bs-success-text-emphasis: #91d3a7;
    --bs-success-bg-subtle: #203329;
    --bs-success-border-subtle: #41634b;
    --bs-danger-text-emphasis: #efa69d;
    --bs-danger-bg-subtle: #402623;
    --bs-danger-border-subtle: #79453d;
    --bs-warning-text-emphasis: #e5c075;
    --bs-warning-bg-subtle: #382f1f;
    --bs-warning-border-subtle: #6e5830;
    --bs-info-text-emphasis: #9dcddc;
    --bs-info-bg-subtle: #21333a;
    --bs-info-border-subtle: #405d69;
}