/**
 * Zapwebp Primitive & Semantic Tokens
 * Light & Dark Mode Strict Token Discipline
 */

/* ==========================================================================
   Light Mode (Default)
   ========================================================================== */
:root,
[data-theme="light"] {
  --bg: #f7f7f4;
  --bg-dropzone: #ffffff;
  --bg-dropzone-hover: #f0f1eb;
  --border-mid: #e2e3dc;
  --border-dropzone: #d5d7cd;
  --text-primary: #1a1c18;
  --gray-600: #73776b;
  --gray-100: #ededeb;

  /* Accent & Status */
  --green-primary: #8dc63f;
  --green-hover: #7db732;
  --green-bright: #c7f36b;
  --green-outline: #8dc63f;
  --green-alpha-13: rgba(141, 198, 63, 0.13);
  --green-alpha-20: rgba(141, 198, 63, 0.20);
  --error: #cf222e;
  --status-dot: #8dc63f;

  /* Simple Code Block Surface (Light Mode) */
  --code-bg: #ffffff;
  --code-header-bg: #f7f7f4;
  --code-border: #e2e3dc;
  --code-text: #1a1c18;
  --code-muted: #73776b;
  --code-copy-bg: #ffffff;
  --code-copy-hover: #f0f1eb;

  /* Callout Semantic Tokens (Light) */
  --callout-note-border: #0969da;
  --callout-note-bg: rgba(9, 105, 218, 0.06);
  --callout-tip-border: var(--green-primary);
  --callout-tip-bg: var(--green-alpha-13);
  --callout-warn-border: #9a6700;
  --callout-warn-bg: rgba(154, 103, 0, 0.08);
  --callout-error-border: var(--error);
  --callout-error-bg: rgba(207, 34, 46, 0.08);

  /* Shell Components */
  --header-bg: rgba(247, 247, 244, 0.92);
  --modal-backdrop: rgba(26, 28, 24, 0.45);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */
[data-theme="dark"] {
  --bg: #10120f;
  --bg-dropzone: #171a15;
  --bg-dropzone-hover: #21251e;
  --border-mid: #292d25;
  --border-dropzone: #343930;
  --text-primary: #f2f4ef;
  --gray-600: #8e9488;
  --gray-100: #1d211b;

  /* Accent & Status */
  --green-primary: #8dc63f;
  --green-hover: #9fe248;
  --green-bright: #c7f36b;
  --green-outline: #8dc63f;
  --green-alpha-13: rgba(141, 198, 63, 0.16);
  --green-alpha-20: rgba(141, 198, 63, 0.25);
  --error: #f85149;
  --status-dot: #8dc63f;

  /* Simple Code Block Surface (Dark Mode) */
  --code-bg: #151813;
  --code-header-bg: #1b1e19;
  --code-border: #292d25;
  --code-text: #e8eae4;
  --code-muted: #8e9488;
  --code-copy-bg: #21251e;
  --code-copy-hover: #2b3027;

  /* Callout Semantic Tokens (Dark) */
  --callout-note-border: #388bfd;
  --callout-note-bg: rgba(56, 139, 253, 0.10);
  --callout-tip-border: var(--green-primary);
  --callout-tip-bg: var(--green-alpha-13);
  --callout-warn-border: #e3b341;
  --callout-warn-bg: rgba(227, 179, 65, 0.10);
  --callout-error-border: #f85149;
  --callout-error-bg: rgba(248, 81, 73, 0.10);

  /* Shell Components */
  --header-bg: rgba(16, 18, 15, 0.92);
  --modal-backdrop: rgba(0, 0, 0, 0.65);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Semantic Aliases (All components reference ONLY these tokens)
   ========================================================================== */
:root {
  --color-surface: var(--bg);
  --color-surface-raised: var(--bg-dropzone);
  --color-surface-hover: var(--bg-dropzone-hover);
  --color-border: var(--border-mid);
  --color-border-dropzone: var(--border-dropzone);
  --color-border-hover: var(--green-primary);
  --color-text: var(--text-primary);
  --color-text-muted: var(--gray-600);
  --color-accent: var(--green-primary);
  --color-accent-hover: var(--green-hover);
  --color-accent-bright: var(--green-bright);
  --color-accent-soft: var(--green-alpha-13);
  --color-danger: var(--error);
  --color-focus-ring: var(--green-outline);
  --color-dot-idle: var(--gray-600);
  --color-dot-active: var(--status-dot);
  --color-dot-done: var(--green-primary);
  --color-dot-error: var(--error);

  /* Raw Motion */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-burst: ease-out;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
}