/**
 * dashboard/tokens.css - TradeCaliber Design Tokens
 * REVOLUTION Phase 5 D2 - canonical design tokens
 *
 * Loaded BEFORE tc-ui.css on every user-facing page so semantic tokens
 * are available to component styles. Per-page inline custom properties
 * override these where local variation is needed.
 *
 * Usage:
 *   color: var(--tc-text-primary);
 *   background: var(--tc-bg-elevated);
 *   font: var(--tc-font-display);
 *   gap: var(--tc-space-3);
 */

:root {
  /* ── COLOR · semantic ─────────────────────────────────────── */
  --tc-bg-base:        #0a0f1a;
  --tc-bg-elevated:    #0e1422;
  --tc-bg-card:        #121a29;
  --tc-bg-deep:        #050709;

  --tc-text-primary:   #e4eaf4;
  --tc-text-secondary: #a3b1cc;
  --tc-text-muted:     #94a0b6;
  --tc-text-disabled:  #4a5566;

  --tc-accent:         #06d6d6;
  --tc-accent-soft:    rgba(6,214,214,0.18);
  --tc-accent-hot:     rgba(6,214,214,0.55);

  --tc-success:        #4ade80;
  --tc-warning:        #fbbf24;
  --tc-danger:         #f87171;
  --tc-info:           #60a5fa;
  --tc-gold:           #d4a544;

  --tc-pos:            #4ade80;
  --tc-neg:            #f87171;
  --tc-neutral:        #94a0b6;

  --tc-rule:           rgba(228,234,244,0.10);
  --tc-rule-strong:    rgba(228,234,244,0.22);
  --tc-overlay:        rgba(0,0,0,0.6);

  /* ── TYPE ─────────────────────────────────────────────────── */
  --tc-font-display:   'Cormorant Garamond', Georgia, serif;
  --tc-font-body:      'Inter', system-ui, sans-serif;
  --tc-font-mono:      'JetBrains Mono', Consolas, monospace;

  --tc-text-xs:        10px;
  --tc-text-sm:        12px;
  --tc-text-base:      14px;
  --tc-text-md:        16px;
  --tc-text-lg:        20px;
  --tc-text-xl:        28px;
  --tc-text-2xl:       40px;
  --tc-text-3xl:       56px;
  --tc-text-display:   72px;

  --tc-leading-tight:  1.1;
  --tc-leading-normal: 1.5;
  --tc-leading-loose:  1.8;

  --tc-tracking-tight:  -0.02em;
  --tc-tracking-normal: 0;
  --tc-tracking-wide:   0.04em;
  --tc-tracking-eyebrow: 0.18em;

  /* ── SPACING (8px scale) ──────────────────────────────────── */
  --tc-space-0:        0;
  --tc-space-1:        4px;
  --tc-space-2:        8px;
  --tc-space-3:        12px;
  --tc-space-4:        16px;
  --tc-space-5:        20px;
  --tc-space-6:        24px;
  --tc-space-8:        32px;
  --tc-space-10:       40px;
  --tc-space-12:       48px;
  --tc-space-16:       64px;
  --tc-space-20:       80px;
  --tc-space-24:       96px;

  /* ── SIZE ─────────────────────────────────────────────────── */
  --tc-touch-target:   44px;
  --tc-icon-sm:        16px;
  --tc-icon-md:        20px;
  --tc-icon-lg:        24px;

  /* ── RADIUS ───────────────────────────────────────────────── */
  --tc-radius-sm:      4px;
  --tc-radius-md:      6px;
  --tc-radius-lg:      10px;
  --tc-radius-pill:    100px;
  --tc-radius-circle:  50%;

  /* ── BORDER ───────────────────────────────────────────────── */
  --tc-border-thin:    1px solid var(--tc-rule);
  --tc-border-strong:  1px solid var(--tc-rule-strong);
  --tc-border-accent:  1px solid var(--tc-accent);

  /* ── SHADOW ───────────────────────────────────────────────── */
  --tc-shadow-sm:      0 2px 4px rgba(0,0,0,0.3);
  --tc-shadow-md:      0 6px 16px rgba(0,0,0,0.35);
  --tc-shadow-lg:      0 12px 36px rgba(0,0,0,0.45);
  --tc-shadow-glow:    0 0 12px var(--tc-accent-hot);

  /* ── MOTION ───────────────────────────────────────────────── */
  --tc-ease-quart:     cubic-bezier(0.25, 1, 0.5, 1);
  --tc-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --tc-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  --tc-duration-fast:  120ms;
  --tc-duration-base:  200ms;
  --tc-duration-slow:  400ms;
  --tc-duration-glow:  2400ms;

  /* ── Z-INDEX ──────────────────────────────────────────────── */
  --tc-z-base:         0;
  --tc-z-elevated:     10;
  --tc-z-overlay:      100;
  --tc-z-drawer:       1000;
  --tc-z-modal:        2000;
  --tc-z-toast:        3000;
  --tc-z-tooltip:      4000;
  --tc-z-tape:         9999;
}

/* Reduced motion - mandatory accessibility override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tc-duration-fast:  0ms;
    --tc-duration-base:  0ms;
    --tc-duration-slow:  0ms;
    --tc-duration-glow:  0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── A11y · global focus-visible (WCAG 2.4.7 + 2.4.11) ─────── */
/* REVOLUTION cycle 68 Phase 5: universal focus ring across every
   interactive element. Component-level overrides (tc-ui.css btn,
   dialog) keep their bespoke ring; this is the safety net. */
:where(a, button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"]), [role="button"],
       [role="link"], [role="tab"], [role="menuitem"],
       [role="option"], [role="checkbox"], [role="radio"]):focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
  border-radius: var(--tc-radius-sm);
}

/* Forced-colors mode (Windows High Contrast / WCAG 1.4.11) */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [role="button"]):focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}

/* Skip-link visual treatment — visually hidden until focused.
   Used by .tc-skip-link on every page. */
.tc-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--tc-z-tooltip);
}
.tc-skip-link:focus,
.tc-skip-link:focus-visible {
  position: fixed;
  left: var(--tc-space-4);
  top: var(--tc-space-4);
  width: auto;
  height: auto;
  padding: var(--tc-space-3) var(--tc-space-5);
  background: var(--tc-accent);
  color: var(--tc-bg-deep);
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-sm);
  font-weight: 700;
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--tc-radius-sm);
  outline: 2px solid var(--tc-text-primary);
  outline-offset: 2px;
  box-shadow: var(--tc-shadow-md);
  min-height: var(--tc-touch-target);
  display: inline-flex;
  align-items: center;
}

/* Screen-reader-only utility (WCAG 1.3.1 / 4.1.2 helpers) */
.tc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}