/* ─── Design Tokens ─────────────────────────────────────────────────
   Single source of truth for all visual decisions.
   Imported by components.css and referenced in index.html.
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* ── Colors ── */
  --bg:      #0d1117;
  --surface: #161b22;
  --surface2:#1c2128;
  --surface3:#21262d;

  --border:  #30363d;
  --border2: #3d444d;

  --text:    #e6edf3;
  --muted:   #8b949e;
  --muted2:  #6e7681;

  --ok:      #3fb950;
  --warn:    #d29922;
  --error:   #f85149;
  --info:    #58a6ff;
  --purple:  #bc8cff;
  --soc:     #f0883e;

  /* ── Semantic overlays (background tints at given alpha) ── */
  --ok-tint:     rgba(63, 185, 80, .15);
  --ok-border:   rgba(63, 185, 80, .30);
  --ok-border-h: rgba(63, 185, 80, .60);
  --warn-tint:   rgba(210, 153, 34, .15);
  --warn-border: rgba(210, 153, 34, .30);
  --error-tint:  rgba(248, 81, 73, .10);
  --error-tint2: rgba(248, 81, 73, .15);
  --error-border:rgba(248, 81, 73, .30);
  --error-border-h:rgba(248, 81, 73, .65);
  --info-tint:   rgba(88, 166, 255, .15);
  --purple-tint: rgba(188, 140, 255, .15);
  --purple-border:rgba(188, 140, 255, .40);
  --soc-tint:    rgba(240, 136, 62, .15);
  --soc-border:  rgba(240, 136, 62, .30);

  /* ── Typography ── */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --text-xs:  11px;
  --text-sm:  12px;
  --text-base:13px;
  --text-md:  14px;
  --text-lg:  15px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  --lh-tight: 1.3;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

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

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  10px;
  --radius-2xl: 12px;
  --radius-pill:20px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);

  /* ── Transitions ── */
  --t-fast:   150ms ease;
  --t-base:   200ms ease;
  --t-slow:   300ms ease;

  /* ── Layout ── */
  --sidebar-w: 220px;
}

/* ── Light mode ───────────────────────────────────────────────────
   All dark-mode defaults above; override only what changes.        */
@media (prefers-color-scheme: light) {
  :root {
    --bg:      #ffffff;
    --surface: #f6f8fa;
    --surface2:#eaeef2;
    --surface3:#e1e4e8;

    --border:  #d0d7de;
    --border2: #afb8c1;

    --text:    #1f2328;
    --muted:   #57606a;
    --muted2:  #6e7781;

    --ok:      #1a7f37;
    --warn:    #9a6700;
    --error:   #cf222e;
    --info:    #0969da;
    --purple:  #7c4af7;
    --soc:     #bc4c00;

    --ok-tint:     rgba(26, 127, 55, .10);
    --ok-border:   rgba(26, 127, 55, .25);
    --ok-border-h: rgba(26, 127, 55, .55);
    --warn-tint:   rgba(154, 103, 0, .10);
    --warn-border: rgba(154, 103, 0, .25);
    --error-tint:  rgba(207, 34, 46, .08);
    --error-tint2: rgba(207, 34, 46, .12);
    --error-border:rgba(207, 34, 46, .25);
    --error-border-h:rgba(207, 34, 46, .55);
    --info-tint:   rgba(9, 105, 218, .10);
    --purple-tint: rgba(124, 74, 247, .10);
    --purple-border:rgba(124, 74, 247, .35);
    --soc-tint:    rgba(188, 76, 0, .10);
    --soc-border:  rgba(188, 76, 0, .25);

    --shadow-sm: 0 1px 3px rgba(0,0,0,.12);
    --shadow-md: 0 4px 12px rgba(0,0,0,.15);
  }
}