/* =========================================================================
   BMAD / AIND — Brand Tokens (vibrant rainbow direction)
   Source of truth: design-system/colors_and_type.css
   Loaded first, before all other theme stylesheets. Do not add layout/
   component rules here — tokens only.
   ========================================================================= */

:root {
  /* ---------- Brand gradient ---------- */
  --brand-warm:    #ffb273;
  --brand-pink:    #ff7ab8;
  --brand-magenta: #d846ef;
  --brand-violet:  #8b5cf6;
  --brand-cyan:    #38bdf8;
  --brand-gradient: linear-gradient(135deg,
    #ffb273 0%, #ff7ab8 22%, #d846ef 48%, #8b5cf6 72%, #38bdf8 100%);
  --brand-gradient-radial: radial-gradient(ellipse at 30% 30%,
    #ff7ab8 0%, #d846ef 35%, #8b5cf6 65%, #38bdf8 100%);
  --brand-gradient-soft: linear-gradient(135deg,
    rgba(255,178,115,.14) 0%, rgba(216,70,239,.14) 50%, rgba(56,189,248,.14) 100%);
  --brand-gradient-text: linear-gradient(95deg,
    #ff7ab8 0%, #d846ef 40%, #8b5cf6 70%, #38bdf8 100%);
  /* Two-stop version for buttons/small chips, matches design-system Button primitive */
  --brand-gradient-btn: linear-gradient(135deg, #ff7ab8 0%, #d846ef 50%, #8b5cf6 100%);

  /* ---------- Brand hue scales ---------- */
  --magenta-50: #fdf2fb; --magenta-100: #fce7f7; --magenta-200: #fbcfee;
  --magenta-500: #d846ef; --magenta-600: #c026d3; --magenta-700: #a21caf;
  --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9;
  --cyan-500: #38bdf8; --cyan-600: #0ea5e9; --cyan-700: #0284c7;

  /* ---------- Neutrals ---------- */
  --neutral-50: #f9fafb; --neutral-100: #f3f4f6; --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db; --neutral-400: #9ca3af; --neutral-500: #6b7280;
  --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937;
  --neutral-900: #111827; --ink: #0a0a14;

  /* Status (unchanged, UI chrome only) */
  --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6;

  /* ---------- Semantic ---------- */
  --bg: var(--neutral-50);
  --surface: #ffffff;
  --surface-2: var(--neutral-100);
  --border: var(--neutral-200);
  --fg: var(--ink);
  --fg-muted: var(--neutral-600);
  --fg-subtle: var(--neutral-400);
  --fg-on-brand: #ffffff;

  --accent: var(--magenta-500);
  --accent-hover: var(--magenta-600);
  --accent-soft: var(--magenta-50);
  --accent-text: var(--magenta-700);
  --link: var(--violet-600);
  --link-hover: var(--magenta-600);
  --focus-ring: 0 0 0 3px rgba(216,70,239,.30);

  /* ---------- Type ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;

  /* ---------- Radius / shadow / motion ---------- */
  --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-glow: 0 0 0 1px rgba(216,70,239,.30), 0 8px 32px -8px rgba(216,70,239,.45);
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
}