/**
 * 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);

  /* Fluid Responsive Typography Scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12–13px */
  --text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14–15px */
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);    /* 16–17px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);    /* 18–20px */
  --text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);    /* 24–30px */
  --text-2xl: clamp(2rem, 1.75rem + 1.25vw, 2.5rem);       /* 32–40px */

  /* Touch & Interaction Standard (WCAG 2.2 AA) */
  --touch-target-min: 44px;
}

/* ==========================================================================
   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;

  /* Fluid Typography Tokens (clamp-based, scale gracefully across devices) */
  --text-xs: clamp(0.72rem, 0.7rem + 0.15vw, 0.78rem);
  --text-sm: clamp(0.82rem, 0.8rem + 0.2vw, 0.88rem);
  --text-base: clamp(0.95rem, 0.92rem + 0.25vw, 1.05rem);
  --text-lg: clamp(1.12rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.35rem, 1.25rem + 0.6vw, 1.55rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);

  /* Touch Target Standard */
  --touch-target-min: 44px;
}