/*
 *  █████╗  ██████╗██╗  ██╗███╗   ███╗ █████╗ ██████╗
 * ██╔══██╗██╔════╝██║  ██║████╗ ████║██╔══██╗██╔══██╗
 * ███████║██║     ███████║██╔████╔██║███████║██║  ██║
 * ██╔══██║██║     ██╔══██║██║╚██╔╝██║██╔══██║██║  ██║
 * ██║  ██║╚██████╗██║  ██║██║ ╚═╝ ██║██║  ██║██████╔╝
 * ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝     ╚═╝╚═╝  ╚═╝╚═════╝
 *
 *  █████╗ ██╗     ██╗███╗   ███╗██╗███╗   ██╗
 * ██╔══██╗██║     ██║████╗ ████║██║████╗  ██║
 * ███████║██║     ██║██╔████╔██║██║██╔██╗ ██║  ╔██╗
 * ██╔══██║██║     ██║██║╚██╔╝██║██║██║╚██╗██║ ██  ██
 * ██║  ██║███████╗██║██║ ╚═╝ ██║██║██║ ╚████║  ╚██╝
 * ╚═╝  ╚═╝╚══════╝╚═╝╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝   ══
 *
 * tokens.css — shared design primitives, load before any other stylesheet
 */

/* Dark mode (default) */
:root {
  /* Surface */
  --color-bg: #0f0f0f;
  --color-surface: #2a2a2a;
  --color-surface-hover: #222222;
  --color-border: #2e2e2e;
  --color-border-subtle: #1f1f1f;

  /* Text */
  --color-text: #f0f0f0;
  --color-text-muted: #777777;
  --color-text-faint: #3d3d3d;

  /* Accent */
  --color-accent: #e8e8e8;
  --color-accent-hover: #ffffff;

  /* Theme-independent neutrals */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Links */
  --color-link: #999999;
  --color-link-hover: #f0f0f0;

  /* Status */
  --color-info: #60a5fa;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-warning-bg: #2a2010;
  --color-warning-border: #7a5c00;
  --color-warning-text: #fbbf24;
  --color-error: #f87171;
  --color-error-bg: #2a1515;
  --color-error-border: #5a2020;
  --color-error-strong: #f87171;
  --color-listening: #ef4444;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.48);
  --shadow-bubble: 0 8px 24px rgba(0, 0, 0, 0.3);

  /* Typography */
  --font-sans:
    "-apple-system-body", ui-sans-serif, -apple-system, system-ui, "Segoe UI",
    Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-mono:
    ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* Space (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Border width */
  --border-width-1: 1px;
  --border-width-2: 2px;

  /* Tooltip */
  --tooltip-bg: #f5f5f5;
  --tooltip-text: #1a1a1a;
}

/* Light mode overrides */
[data-theme="light"] {
  /* Surface */
  --color-bg: #ffffff;
  --color-surface: #f0f0f0;
  --color-surface-hover: #e8e8e8;
  --color-border: #e2e2e2;
  --color-border-subtle: #ebebeb;

  /* Text */
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-text-faint: #9c9c9c;

  /* Accent */
  --color-accent: #111111;
  --color-accent-hover: #333333;

  /* Links */
  --color-link: #555555;
  --color-link-hover: #1a1a1a;

  /* Status */
  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffeaa7;
  --color-warning-text: #856404;
  --color-error-bg: #ffe6e6;
  --color-error-border: #ff4444;
  --color-error-strong: #cc0000;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-bubble: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Tooltip */
  --tooltip-bg: #1a1a1a;
  --tooltip-text: #f5f5f5;
}