/* ============================================================
   ToolsPack — Theme (CSS Custom Properties)
   Light + Dark tokens. All components reference var(--color-*)
   ============================================================ */

:root {
  /* ── Background & Surface ───────────────────────────────── */
  --color-bg:          #FFFFFF;
  --color-surface:     #F5F5F7;
  --color-surface-2:   #FFFFFF;

  /* ── Borders ────────────────────────────────────────────── */
  --color-border:      #E5E5EA;

  /* ── Text ───────────────────────────────────────────────── */
  --color-text:        #1D1D1F;
  --color-text-muted:  #6E6E73;

  /* ── Accent (Apple system blue — single hue) ────────────── */
  --color-accent:       #0A84FF;
  --color-accent-hover: #0071E3;
  --color-accent-glow:  rgba(10, 132, 255, 0.15);

  /* ── Functional ─────────────────────────────────────────── */
  --color-success:     #30D158;
  --color-danger:      #FF453A;
  --color-warning:     #FF9F0A;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Menlo", "Consolas",
               "Courier New", monospace;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-float: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-96: 96px;

  /* ── Layout ─────────────────────────────────────────────── */
  --content-width: 1120px;
  --header-height: 64px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-std:  200ms ease;
  --transition-slow: 300ms ease;

  /* ── Nav frosted glass ───────────────────────────────────── */
  --nav-bg: rgba(255, 255, 255, 0.72);
  --nav-border: rgba(229, 229, 234, 0.8);
}

/* ── Dark Mode Overrides ─────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:          #0B0B0D;
  --color-surface:     #1C1C1E;
  --color-surface-2:   #141416;
  --color-border:      #2C2C2E;
  --color-text:        #F5F5F7;
  --color-text-muted:  #8E8E93;
  --color-accent:       #0A84FF;
  --color-accent-hover: #3AA0FF;
  --color-accent-glow:  rgba(10, 132, 255, 0.20);
  --nav-bg:  rgba(11, 11, 13, 0.72);
  --nav-border: rgba(44, 44, 46, 0.8);
}

/* ── Syntax highlight tokens (for code output panels) ─────────── */
:root {
  --syntax-keyword:  #CF8E6D;
  --syntax-string:   #6AAB73;
  --syntax-number:   #2AACB8;
  --syntax-property: #9876AA;
  --syntax-null:     #CC7832;
  --syntax-bracket:  var(--color-text-muted);
}
[data-theme="dark"] {
  --syntax-keyword:  #CC7832;
  --syntax-string:   #6A8759;
  --syntax-number:   #6897BB;
  --syntax-property: #9876AA;
  --syntax-null:     #CC7832;
}