/* ════════════════════════════════════════════════════════
   THOS Design System — tokens.css
   Sampled from the THOS logo asset
   ════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Palette (sampled from logo) ────────────── */
  --slate-950: #2D3542;
  --slate-900: #364152;
  --slate-850: #3D4A5C;
  --slate-800: #455166;
  --slate-700: #566479;
  --slate-600: #6B7A8D;

  --ivory-50:  #F5F0E8;
  --ivory-100: #EDE7DB;
  --ivory-200: #DDD5C5;
  --ivory-300: #CCC3B0;

  --accent-blue:       #5B8FB9;
  --accent-blue-hover:  #7BAED4;
  --accent-blue-muted:  rgba(91, 143, 185, 0.2);

  --accent-amber:       #C9A96E;
  --accent-amber-muted: rgba(201, 169, 110, 0.13);

  /* ── Semantic: Surfaces ───────────────────────────── */
  --surface-base:      var(--slate-950);
  --surface-elevated:  var(--slate-900);
  --surface-overlay:   var(--slate-850);
  --surface-input:     #2A303C;
  --surface-card:      var(--slate-900);
  --surface-card-hover:var(--slate-850);
  --surface-inverse:   var(--ivory-50);

  /* ── Semantic: Text ───────────────────────────────── */
  --text-primary:   var(--ivory-50);
  --text-secondary: var(--ivory-200);
  --text-tertiary:  var(--slate-600);
  --text-inverse:   var(--slate-950);
  --text-accent:    var(--accent-blue);
  --text-link:      var(--accent-blue-hover);

  /* ── Semantic: Borders ────────────────────────────── */
  --border-subtle:  rgba(69, 81, 102, 0.27);
  --border-default: rgba(69, 81, 102, 0.53);
  --border-strong:  var(--slate-700);
  --border-accent:  var(--accent-blue);

  /* ── Semantic: States ─────────────────────────────── */
  --success:       #6B9E78;
  --success-muted: rgba(107, 158, 120, 0.13);
  --warning:       #C9976E;
  --warning-muted: rgba(201, 151, 110, 0.13);
  --danger:        #B85C5C;
  --danger-muted:  rgba(184, 92, 92, 0.13);

  /* ── Typography ───────────────────────────────────── */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Spacing (4px base) ───────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Border Radii ─────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Elevation ────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 20px rgba(91, 143, 185, 0.15);

  /* ── Transitions ──────────────────────────────────── */
  --ease-micro:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-section: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout Constants ─────────────────────────────── */
  --sidebar-width:     240px;
  --sidebar-collapsed: 64px;
  --topbar-height:     56px;
  --content-max:       1200px;
}