/* ==========================================================================
   Center Tactical — Design Token System
   ~95 CSS custom properties organized by category.
   Themes override these values via :root or [data-theme] selectors.
   ========================================================================== */

:root {
    /* ── Color: Brand ─────────────────────────────────────────────────────── */
    --ot-color-primary:           #4a5d23;
    --ot-color-primary-light:     #6b7f3e;
    --ot-color-primary-dark:      #364518;
    --ot-color-primary-contrast:  #ffffff;

    --ot-color-accent:            #c8a951;
    --ot-color-accent-light:      #d4bc74;
    --ot-color-accent-dark:       #a8893a;
    --ot-color-accent-contrast:   #1a1a1a;

    --ot-color-secondary:         #2c2c2c;
    --ot-color-secondary-light:   #4a4a4a;
    --ot-color-secondary-dark:    #1a1a1a;
    --ot-color-secondary-contrast:#ffffff;

    /* ── Chrome (header / footer) ─────────────────────────────────────────────
       Intentionally NOT defined here. CSS substitutes a custom-property value
       at the element where the property is DECLARED, not where it's used —
       so writing `--ot-color-header-bg: var(--ot-color-primary)` at :root
       would freeze it to the :root default (OD green), and theme overrides
       of --ot-color-primary on body would never propagate.

       Instead, each consumer uses a var() with fallback, e.g.:
           background: var(--ot-color-header-bg, var(--ot-color-primary));
       Fallbacks ARE evaluated at the use site, so the theme's current
       primary wins. Themes that want a header decoupled from primary
       (e.g., Bright Counter's white header) explicitly set --ot-color-header-bg
       in their own [data-theme="..."] rule. */

    /* ── Color: Semantic ──────────────────────────────────────────────────── */
    --ot-color-success:           #22c55e;
    --ot-color-success-light:     #4ade80;
    --ot-color-success-dark:      #16a34a;
    --ot-color-warning:           #f59e0b;
    --ot-color-warning-light:     #fbbf24;
    --ot-color-warning-dark:      #d97706;
    --ot-color-danger:            #ef4444;
    --ot-color-danger-light:      #f87171;
    --ot-color-danger-dark:       #dc2626;
    --ot-color-info:              #3b82f6;
    --ot-color-info-light:        #60a5fa;
    --ot-color-info-dark:         #2563eb;

    /* ── Color: Compliance Alert Tiers ────────────────────────────────────── */
    --ot-color-alert-block:       #dc2626;
    --ot-color-alert-warning:     #f97316;
    --ot-color-alert-advisory:    #eab308;
    --ot-color-alert-info:        #3b82f6;
    --ot-color-alert-audit:       #22c55e;

    /* ── Color: Surface & Background ──────────────────────────────────────── */
    --ot-color-bg:                #ffffff;
    --ot-color-bg-alt:            #f8f9fa;
    --ot-color-bg-elevated:       #ffffff;
    --ot-color-bg-overlay:        rgba(0, 0, 0, 0.5);
    --ot-color-surface:           #ffffff;
    --ot-color-surface-hover:     #f3f4f6;
    --ot-color-surface-active:    #e5e7eb;

    /* ── Color: Text ──────────────────────────────────────────────────────── */
    --ot-color-text:              #1a1a1a;
    --ot-color-text-secondary:    #6b7280;
    --ot-color-text-muted:        #9ca3af;
    --ot-color-text-inverse:      #ffffff;
    --ot-color-text-link:         #4a5d23;
    --ot-color-text-link-hover:   #364518;

    /* ── Color: Border ────────────────────────────────────────────────────── */
    --ot-color-border:            #e5e7eb;
    --ot-color-border-strong:     #d1d5db;
    --ot-color-border-focus:      #4a5d23;

    /* ── Typography: Font Family ──────────────────────────────────────────── */
    --ot-font-heading:            'Oswald', sans-serif;
    --ot-font-body:               'Inter', 'Segoe UI', sans-serif;
    --ot-font-mono:               'JetBrains Mono', 'Cascadia Code', monospace;

    /* ── Typography: Font Size ────────────────────────────────────────────── */
    --ot-text-xs:                 0.75rem;
    --ot-text-sm:                 0.875rem;
    --ot-text-base:               1rem;
    --ot-text-lg:                 1.125rem;
    --ot-text-xl:                 1.25rem;
    --ot-text-2xl:                1.5rem;
    --ot-text-3xl:                1.875rem;
    --ot-text-4xl:                2.25rem;
    --ot-text-5xl:                3rem;

    /* ── Typography: Font Weight ──────────────────────────────────────────── */
    --ot-weight-normal:           400;
    --ot-weight-medium:           500;
    --ot-weight-semibold:         600;
    --ot-weight-bold:             700;
    --ot-weight-extrabold:        800;

    /* ── Typography: Line Height ──────────────────────────────────────────── */
    --ot-leading-tight:           1.25;
    --ot-leading-normal:          1.5;
    --ot-leading-relaxed:         1.75;

    /* ── Typography: Letter Spacing ───────────────────────────────────────── */
    --ot-tracking-tight:          -0.025em;
    --ot-tracking-normal:         0;
    --ot-tracking-wide:           0.05em;
    --ot-tracking-wider:          0.1em;

    /* ── Typography: Text Transform (heading) ─────────────────────────────── */
    --ot-heading-transform:       uppercase;

    /* ── Spacing ──────────────────────────────────────────────────────────── */
    --ot-space-1:                 0.25rem;
    --ot-space-2:                 0.5rem;
    --ot-space-3:                 0.75rem;
    --ot-space-4:                 1rem;
    --ot-space-5:                 1.25rem;
    --ot-space-6:                 1.5rem;
    --ot-space-8:                 2rem;
    --ot-space-10:                2.5rem;
    --ot-space-12:                3rem;
    --ot-space-16:                4rem;
    --ot-space-20:                5rem;

    /* ── Border Radius ────────────────────────────────────────────────────── */
    --ot-radius-none:             0;
    --ot-radius-sm:               2px;
    --ot-radius-md:               4px;
    --ot-radius-lg:               8px;
    --ot-radius-xl:               12px;
    --ot-radius-2xl:              16px;
    --ot-radius-full:             9999px;
    --ot-radius-button:           4px;
    --ot-radius-card:             8px;
    --ot-radius-input:            4px;

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --ot-shadow-sm:               0 1px 2px rgba(0, 0, 0, 0.05);
    --ot-shadow-md:               0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --ot-shadow-lg:               0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --ot-shadow-xl:               0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ── Transitions ──────────────────────────────────────────────────────── */
    --ot-transition-fast:         150ms ease;
    --ot-transition-base:         250ms ease;
    --ot-transition-slow:         350ms ease;

    /* ── Layout ───────────────────────────────────────────────────────────── */
    --ot-container-max:           1280px;
    --ot-sidebar-width:           280px;
    --ot-header-height:           64px;
    --ot-footer-height:           auto;

    /* ── Z-Index ──────────────────────────────────────────────────────────── */
    --ot-z-dropdown:              100;
    --ot-z-sticky:                200;
    --ot-z-modal-backdrop:        300;
    --ot-z-modal:                 400;
    --ot-z-toast:                 500;
    --ot-z-theme-switcher:        600;
}