/* ============================================================
   ChiroCode — Design Tokens
   --cc-* token system. Zero hardcoded values elsewhere.
   ============================================================ */

:root {
    /* === BRAND PALETTE — Raw Values ===
       Never use directly — use semantic tokens below. */

    /* Amber */
    --cc-amber-50:  #FFFBEB;
    --cc-amber-100: #FEF3C7;
    --cc-amber-200: #FDE68A;
    --cc-amber-300: #FCD34D;
    --cc-amber-400: #FBBF24;
    --cc-amber-500: #F59E0B;
    --cc-amber-600: #D97706;
    --cc-amber-700: #B45309;
    --cc-amber-800: #92400E;
    --cc-amber-900: #78350F;

    /* Green */
    --cc-green-50:  #F0FDF4;
    --cc-green-100: #DCFCE7;
    --cc-green-200: #BBF7D0;
    --cc-green-300: #86EFAC;
    --cc-green-400: #4ADE80;
    --cc-green-500: #22C55E;
    --cc-green-600: #16A34A;
    --cc-green-700: #15803D;
    --cc-green-800: #166534;
    --cc-green-900: #14532D;

    /* Slate */
    --cc-slate-50:  #F8FAFC;
    --cc-slate-100: #F1F5F9;
    --cc-slate-200: #E2E8F0;
    --cc-slate-300: #CBD5E1;
    --cc-slate-400: #94A3B8;
    --cc-slate-500: #64748B;
    --cc-slate-600: #475569;
    --cc-slate-700: #334155;
    --cc-slate-800: #1E293B;
    --cc-slate-900: #0F172A;

    /* Red */
    --cc-red-50:  #FEF2F2;
    --cc-red-100: #FEE2E2;
    --cc-red-200: #FECACA;
    --cc-red-300: #FCA5A5;
    --cc-red-500: #EF4444;
    --cc-red-600: #DC2626;
    --cc-red-700: #B91C1C;
    --cc-red-800: #991B1B;

    /* White */
    --cc-white: #FFFFFF;

    /* === SEMANTIC TOKENS — Light Mode === */

    /* Brand */
    --cc-brand-primary:        var(--cc-amber-600);
    --cc-brand-primary-hover:  var(--cc-amber-700);
    --cc-brand-primary-active: var(--cc-amber-800);
    --cc-brand-primary-subtle: var(--cc-amber-50);
    --cc-brand-primary-border: var(--cc-amber-200);

    /* Success / Compliance */
    --cc-success:        var(--cc-green-700);
    --cc-success-hover:  var(--cc-green-800);
    --cc-success-subtle: var(--cc-green-50);
    --cc-success-border: var(--cc-green-200);
    --cc-success-text:   var(--cc-green-800);

    /* Warning */
    --cc-warning:        var(--cc-amber-500);
    --cc-warning-hover:  var(--cc-amber-600);
    --cc-warning-subtle: var(--cc-amber-50);
    --cc-warning-border: var(--cc-amber-200);
    --cc-warning-text:   var(--cc-amber-800);

    /* Error */
    --cc-error:        var(--cc-red-700);
    --cc-error-hover:  var(--cc-red-800);
    --cc-error-subtle: var(--cc-red-50);
    --cc-error-border: var(--cc-red-200);
    --cc-error-text:   var(--cc-red-800);

    /* Surfaces */
    --cc-surface-base:    var(--cc-white);
    --cc-surface-subtle:  var(--cc-slate-50);
    --cc-surface-muted:   var(--cc-slate-100);
    --cc-surface-raised:  var(--cc-white);
    --cc-surface-overlay: var(--cc-white);

    /* Text */
    --cc-text-primary:   var(--cc-slate-900);
    --cc-text-secondary: var(--cc-slate-600);
    --cc-text-muted:     var(--cc-slate-400);
    --cc-text-disabled:  var(--cc-slate-300);
    --cc-text-inverse:   var(--cc-white);
    --cc-text-brand:     var(--cc-amber-700);
    --cc-text-success:   var(--cc-green-700);
    --cc-text-error:     var(--cc-red-700);
    --cc-text-warning:   var(--cc-amber-700);

    /* Borders */
    --cc-border:         var(--cc-slate-200);
    --cc-border-strong:  var(--cc-slate-300);
    --cc-border-subtle:  var(--cc-slate-100);
    --cc-border-brand:   var(--cc-amber-300);
    --cc-border-success: var(--cc-green-300);
    --cc-border-error:   var(--cc-red-300);

    /* Navigation */
    --cc-nav-bg:              var(--cc-slate-900);
    --cc-nav-text:            var(--cc-slate-300);
    --cc-nav-text-hover:      var(--cc-white);
    --cc-nav-text-active:     var(--cc-white);
    --cc-nav-item-hover:      var(--cc-slate-800);
    --cc-nav-item-active:     var(--cc-amber-600);
    --cc-nav-icon:            var(--cc-slate-400);
    --cc-nav-icon-active:     var(--cc-amber-400);
    --cc-nav-border:          var(--cc-slate-800);
    --cc-nav-width:           260px;
    --cc-nav-width-collapsed: 64px;

    /* Topbar */
    --cc-topbar-bg:     var(--cc-white);
    --cc-topbar-border: var(--cc-slate-200);
    --cc-topbar-height: 64px;
    --cc-topbar-text:   var(--cc-slate-700);

    /* Buttons */
    --cc-btn-primary-bg:       var(--cc-amber-600);
    --cc-btn-primary-bg-hover: var(--cc-amber-700);
    --cc-btn-primary-text:     var(--cc-white);
    --cc-btn-secondary-bg:     var(--cc-white);
    --cc-btn-secondary-border: var(--cc-slate-300);
    --cc-btn-secondary-text:   var(--cc-slate-700);
    --cc-btn-secondary-hover:  var(--cc-slate-50);
    --cc-btn-success-bg:       var(--cc-green-700);
    --cc-btn-success-text:     var(--cc-white);
    --cc-btn-success-hover:    var(--cc-green-800);
    --cc-btn-danger-bg:        var(--cc-red-700);
    --cc-btn-danger-text:      var(--cc-white);
    --cc-btn-danger-hover:     var(--cc-red-800);
    --cc-btn-radius:           6px;
    --cc-btn-padding-y:        0.5rem;
    --cc-btn-padding-x:        1rem;

    /* Cards */
    --cc-card-bg:      var(--cc-white);
    --cc-card-border:  var(--cc-slate-200);
    --cc-card-radius:  8px;
    --cc-card-shadow:  0 1px 3px rgba(15, 23, 42, 0.08);
    --cc-card-padding: 1.5rem;

    /* Forms */
    --cc-input-bg:           var(--cc-white);
    --cc-input-border:       var(--cc-slate-300);
    --cc-input-border-focus: var(--cc-amber-500);
    --cc-input-text:         var(--cc-slate-900);
    --cc-input-placeholder:  var(--cc-slate-400);
    --cc-input-radius:       6px;
    --cc-input-padding-y:    0.5rem;
    --cc-input-padding-x:    0.75rem;
    --cc-label-text:         var(--cc-slate-700);

    /* Badges */
    --cc-badge-radius: 4px;

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

    /* Typography */
    --cc-font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --cc-font-heading: 'Playfair Display', Georgia, serif;
    --cc-font-mono:    'JetBrains Mono', Consolas, Menlo, monospace;

    --cc-text-xs:   0.75rem;
    --cc-text-sm:   0.875rem;
    --cc-text-base: 1rem;
    --cc-text-lg:   1.125rem;
    --cc-text-xl:   1.25rem;
    --cc-text-2xl:  1.5rem;
    --cc-text-3xl:  1.875rem;
    --cc-text-4xl:  2.25rem;

    --cc-leading-tight:   1.25;
    --cc-leading-normal:  1.5;
    --cc-leading-relaxed: 1.75;

    --cc-weight-normal:   400;
    --cc-weight-medium:   500;
    --cc-weight-semibold: 600;
    --cc-weight-bold:     700;

    /* Transitions */
    --cc-transition-fast:   150ms ease;
    --cc-transition-normal: 200ms ease;
    --cc-transition-slow:   300ms ease;

    /* Z-index */
    --cc-z-base:    1;
    --cc-z-nav:     100;
    --cc-z-topbar:  200;
    --cc-z-modal:   300;
    --cc-z-toast:   400;
    --cc-z-tooltip: 500;
}

/* === DARK MODE TOKEN OVERRIDES === */
[data-theme="dark"] {
    /* Surfaces */
    --cc-surface-base:    var(--cc-slate-900);
    --cc-surface-subtle:  var(--cc-slate-800);
    --cc-surface-muted:   var(--cc-slate-700);
    --cc-surface-raised:  var(--cc-slate-800);
    --cc-surface-overlay: var(--cc-slate-800);

    /* Text */
    --cc-text-primary:   var(--cc-slate-50);
    --cc-text-secondary: var(--cc-slate-300);
    --cc-text-muted:     var(--cc-slate-500);
    --cc-text-disabled:  var(--cc-slate-600);

    /* Borders */
    --cc-border:        var(--cc-slate-700);
    --cc-border-strong: var(--cc-slate-600);
    --cc-border-subtle: var(--cc-slate-800);

    /* Topbar */
    --cc-topbar-bg:     var(--cc-slate-800);
    --cc-topbar-border: var(--cc-slate-700);
    --cc-topbar-text:   var(--cc-slate-200);

    /* Cards */
    --cc-card-bg:     var(--cc-slate-800);
    --cc-card-border: var(--cc-slate-700);
    --cc-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    /* Forms */
    --cc-input-bg:     var(--cc-slate-800);
    --cc-input-border: var(--cc-slate-600);
    --cc-input-text:   var(--cc-slate-100);
    --cc-label-text:   var(--cc-slate-300);

    /* Buttons */
    --cc-btn-secondary-bg:     var(--cc-slate-700);
    --cc-btn-secondary-border: var(--cc-slate-600);
    --cc-btn-secondary-text:   var(--cc-slate-200);
    --cc-btn-secondary-hover:  var(--cc-slate-600);
}