/*
 * Feldberg Labs -- Shared Design Tokens
 *
 * Canonical source for colors, typography, spacing, and radii.
 * All apps import this file. Do not override these values locally
 * unless adding app-specific extensions (e.g., staging variants).
 *
 * Usage:
 *   Vanilla CSS:  @import "design-tokens.css";
 *   Tailwind v4:  @import "design-tokens.css"; then reference vars in @theme {}
 */

/* ----------------------------------------------------------------
   Dark theme (default)
   ---------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Backgrounds */
  --bg:            #0f1117;
  --surface:       #1a1d27;
  --surface-hover: #222632;
  --card:          #1a1d27;
  --overlay:       rgba(0, 0, 0, 0.5);

  /* Borders */
  --border:        #2a2e3a;

  /* Text */
  --text:          #e1e4eb;
  --text-muted:    #8b90a0;

  /* Semantic colors */
  --green:         #34d399;
  --red:           #f87171;
  --yellow:        #fbbf24;
  --blue:          #60a5fa;

  /* Button contrast (text on colored buttons) */
  --btn-contrast:  #000000;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", monospace;

  /* Type scale */
  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 12px;
  --text-md:   13px;
  --text-lg:   14px;  /* body default */
  --text-xl:   15px;
  --text-2xl:  16px;
  --text-3xl:  18px;

  /* Spacing (4px base) */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;

  /* Border radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 50%;

  /* Transitions */
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
}

/* ----------------------------------------------------------------
   Light theme
   ---------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  /* Backgrounds */
  --bg:            #ffffff;
  --surface:       #f4f5f7;
  --surface-hover: #ecedf0;
  --card:          #ffffff;
  --overlay:       rgba(0, 0, 0, 0.3);

  /* Borders */
  --border:        #d4d7de;

  /* Text */
  --text:          #1a1d27;
  --text-muted:    #636981;

  /* Semantic colors (desaturated for light backgrounds) */
  --green:         #0f9960;
  --red:           #d93025;
  --yellow:        #b45309;
  --blue:          #2563eb;

  /* Button contrast */
  --btn-contrast:  #ffffff;
}