/*
 * ZenBrain design tokens — Direction A "Indigo Primary"
 * Primary expression: Indigo (#6366F1) CTA/interactive; Teal (#06B6D4) accent/gradient start.
 * Source of truth: brand/tokens/zenbrain-tokens.css (kept in sync with the brand workspace).
 */

:root {
  /* Primitive palette — slate */
  --palette-slate-950: #0f1215;
  --palette-slate-900: #18191f;
  --palette-slate-800: #252b3d;
  --palette-slate-700: #2d3447;
  --palette-slate-600: #50526a;
  --palette-slate-400: #9b9cb5;
  --palette-slate-300: #d1d5db;
  --palette-slate-200: #e4e4ec;
  --palette-slate-100: #f2f2f7;
  --palette-slate-50:  #f7f7fa;

  /* Primitive palette — indigo (primary/gradient-end) */
  --palette-indigo-700: #4338ca;
  --palette-indigo-600: #4f46e5;
  --palette-indigo-500: #6366f1;
  --palette-indigo-400: #818cf8;
  --palette-indigo-300: #a5b4fc;
  --palette-indigo-100: #e0e7ff;

  /* Primitive palette — teal (accent/gradient-start) */
  --palette-teal-700: #0e7490;
  --palette-teal-600: #0891b2;
  --palette-teal-500: #06b6d4;
  --palette-teal-400: #22d3ee;
  --palette-teal-300: #67e8f9;
  --palette-teal-100: #cffafe;

  /* Primitive palette — states */
  --palette-red-500:   #ef4444;
  --palette-red-400:   #f87171;
  --palette-red-100:   #fef2f2;
  --palette-green-500: #10b981;
  --palette-green-400: #34d399;
  --palette-green-100: #f0fdf4;
  --palette-amber-500: #f59e0b;
  --palette-amber-400: #fbbf24;
  --palette-amber-100: #fffbeb;

  /* Brand gradient — logo lockups, hero blocks, marketing surfaces */
  --brand-gradient:        linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --brand-gradient-reverse: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  --brand-gradient-start:  #06b6d4;
  --brand-gradient-end:    #6366f1;

  /* Semantic colors — light surfaces */
  --color-bg:              var(--palette-slate-50);
  --color-surface:         #ffffff;
  --color-surface-alt:     var(--palette-slate-100);
  --color-surface-hover:   #eeeff5;
  --color-border:          var(--palette-slate-200);
  --color-border-subtle:   #ededf4;

  --color-text-primary:    var(--palette-slate-900);
  --color-text-secondary:  var(--palette-slate-600);
  --color-text-tertiary:   var(--palette-slate-400);

  /* Primary — indigo CTA */
  --color-primary:         var(--palette-indigo-500);
  --color-primary-hover:   var(--palette-indigo-600);
  --color-primary-subtle:  rgba(99, 102, 241, 0.08);
  --color-primary-emphasis: rgba(99, 102, 241, 0.12);
  --color-primary-fg:      #ffffff;

  /* Accent — teal, decorative use only (icons, sparkles, highlights). Not for body text. */
  --color-accent:          var(--palette-teal-500);
  --color-accent-hover:    var(--palette-teal-600);

  /* States */
  --color-danger:          var(--palette-red-500);
  --color-danger-bg:       var(--palette-red-100);
  --color-success:         var(--palette-green-500);
  --color-success-bg:      var(--palette-green-100);
  --color-warning:         var(--palette-amber-500);
  --color-warning-bg:      var(--palette-amber-100);

  /* Typography */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 15px;
  --font-size-xl: 17px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800; /* wordmark only */
  --line-height: 1.4;
  --tracking-wordmark: -0.03em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Motion */
  --transition-instant: 60ms ease;
  --transition-fast: 120ms ease;
  --transition-feedback: 200ms ease;

  /* Elevation / shadows */
  --shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.35); /* indigo */

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* AI surface tokens — additive, zero breaking changes */
  --color-ai-surface: rgba(6, 182, 212, 0.05);
  --color-ai-border:  rgba(6, 182, 212, 0.18);
  --color-ai-text:    var(--palette-teal-600);

  /* App-specific sizes */
  --popup-width: 440px;
  --popup-max-height: 640px;
  --header-height: 48px;
  --ai-bar-height: 40px;
  --search-bar-height: 44px;
  --save-bar-height: 36px;
  --session-card-height: 54px;
  --tab-row-height: 40px;
  --section-header-height: 24px;

  /* ZenBrain brand tokens — logo mark + NTP surface */
  --color-brand-ink:    var(--palette-slate-900);   /* logo box fill */
  --color-brand-thread: #ffffff;                     /* logo stroke / thread lines */
  --gradient-ntp-bg:    linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(99, 102, 241, 0.08) 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:              var(--palette-slate-950);   /* #0f1215 */
    --color-surface:         #1c2030;                    /* elevated above bg; was #18191f (too close) */
    --color-surface-alt:     #252d42;                    /* was #252b3d */
    --color-surface-hover:   #2e3650;
    --color-border:          #3a4268;                    /* stronger dividers; was #2d3447 */
    --color-border-subtle:   #262e4a;                    /* truly subtler than --color-border; was #3d444e (inverted) */

    --color-text-primary:    var(--palette-slate-50);
    --color-text-secondary:  var(--palette-slate-400);
    --color-text-tertiary:   var(--palette-slate-300);

    --color-primary:         var(--palette-indigo-400);
    --color-primary-hover:   var(--palette-indigo-300);
    --color-primary-subtle:  rgba(99, 102, 241, 0.12);
    --color-primary-emphasis: rgba(99, 102, 241, 0.18);
    --color-primary-fg:      #ffffff;

    --color-accent:          var(--palette-teal-400);
    --color-accent-hover:    var(--palette-teal-300);

    --color-danger:          var(--palette-red-400);
    --color-danger-bg:       rgba(239, 68, 68, 0.15);
    --color-success:         var(--palette-green-400);
    --color-success-bg:      rgba(16, 185, 129, 0.15);
    --color-warning:         var(--palette-amber-400);
    --color-warning-bg:      rgba(245, 158, 11, 0.15);

    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.15);
    --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.20);
    --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.45); /* indigo-400 */

    --color-brand-ink:    var(--palette-slate-800);
    --gradient-ntp-bg:    linear-gradient(135deg, rgba(6, 182, 212, 0.07) 0%, rgba(99, 102, 241, 0.1) 100%);

    --color-ai-surface: rgba(6, 182, 212, 0.08);
    --color-ai-border:  rgba(6, 182, 212, 0.22);
    --color-ai-text:    var(--palette-teal-400);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes zenbrainShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Single keyframe used by the Recap intent-window indicator (MIN-176 §B). */
@keyframes zb-recap-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Spinner for the ⌘K palette running-state row (MIN-180). */
@keyframes zb-palette-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Shimmer used by OrganizePanel loading skeletons and AIStatusBar progress bar. */
@keyframes zb-organize-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* Pulse used by AIStatusBar SparkleIcon during organize loading. */
@keyframes zb-sparkle-pulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Global focus ring — applied via :focus-visible so mouse users don't see it.
   Uses --shadow-focus (indigo) to match the primary brand token. Inline-style components
   can't express pseudo-selectors, so this is the canonical focus rule. */
button:focus-visible,
[role="option"]:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}