:root {
  /* Surface */
  --bg: #f8fafc;
  --card: #ffffff;
  --card-sunken: #f8fafc;

  /* Brand / text */
  --ink: #0f172a;          /* Slate 900 - primary text, headings */
  --primary: #0ea5e9;      /* Sky 500 - tech accent, links, focus */
  --action: #0d9488;       /* Teal 600 - primary CTAs */
  --action-hover: #0f766e;
  --success: #10b981;      /* Emerald 500 */
  --warning: #d97706;      /* Amber 600 */
  --danger: #dc2626;       /* Red 600 */

  --text: #334155;         /* Slate 700 */
  --text-muted: #64748b;   /* Slate 500 */
  --text-faint: #94a3b8;   /* Slate 400 */
  --border: #e2e8f0;       /* Slate 200 */
  --border-strong: #cbd5e1;/* Slate 300 */

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 20px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);

  /* Shape */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}