/* =============================================================================
   Sohay — Design Tokens
   Tier 1 (primitives) → Tier 2 (semantic) → Tier 3 (component tokens live with
   their components). Theming swaps only Tier 2. See plans/02-design-system.md.
   ========================================================================== */

:root {
  /* ---- Tier 1: Brand (Indigo) ------------------------------------------- */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --indigo-950: #1e1b4b;

  /* ---- Tier 1: Neutral (Slate) ------------------------------------------ */
  --slate-0:   #ffffff;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* ---- Tier 1: Accent (Cyan — "AI / live") ------------------------------ */
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;

  /* ---- Tier 1: Status --------------------------------------------------- */
  --green-600:  #16a34a;  --green-bg:  #dcfce7;
  --amber-600:  #d97706;  --amber-bg:  #fef3c7;
  --red-600:    #dc2626;  --red-bg:    #fee2e2;
  --blue-600:   #2563eb;  --blue-bg:   #dbeafe;

  /* ---- Tier 1: Third-party brand (logos only) --------------------------- */
  --brand-wc: #7f54b3;   /* WooCommerce purple — logo lockups only */

  /* ---- Tier 2: Semantic (LIGHT theme) ----------------------------------- */
  --bg-canvas:       var(--slate-0);
  --bg-subtle:       var(--slate-50);
  --bg-muted:        var(--slate-100);
  --surface:         var(--slate-0);
  --surface-hover:   var(--slate-50);
  --border:          var(--slate-200);
  --border-strong:   var(--slate-300);
  --text-primary:    var(--slate-900);
  --text-secondary:  var(--slate-600);
  --text-tertiary:   var(--slate-500);
  --text-inverse:    var(--slate-0);
  --brand:           var(--indigo-600);
  --brand-hover:     var(--indigo-700);
  --brand-subtle-bg: var(--indigo-50);
  --brand-border:    var(--indigo-200);
  --accent:          var(--cyan-500);
  --link:            var(--indigo-600);
  --focus-ring:      rgba(99, 102, 241, 0.55);
  --overlay:         rgba(2, 6, 23, 0.5);

  --success:     var(--green-600);  --success-bg: var(--green-bg);
  --warning:     var(--amber-600);  --warning-bg: var(--amber-bg);
  --danger:      var(--red-600);    --danger-bg:  var(--red-bg);
  --info:        var(--blue-600);   --info-bg:    var(--blue-bg);

  /* ---- Gradients (decorative only) -------------------------------------- */
  --gradient-hero:  radial-gradient(60% 60% at 50% 0%, var(--indigo-100) 0%, transparent 70%);
  --gradient-brand: linear-gradient(135deg, var(--indigo-600) 0%, var(--indigo-500) 55%, var(--cyan-500) 130%);
  --gradient-sheen: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0));

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  --text-display:  clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem);
  --text-h1:       clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --text-h2:       clamp(1.75rem, 1.35rem + 1.7vw, 2.25rem);
  --text-h3:       1.5rem;
  --text-h4:       1.25rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-body-sm:  0.875rem;
  --text-caption:  0.75rem;

  --lh-display: 1.06;
  --lh-heading: 1.18;
  --lh-body:    1.6;
  --measure:    68ch;

  /* ---- Spacing (4px grid) ----------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Layout ----------------------------------------------------------- */
  --section-y:        clamp(4rem, 2.4rem + 6vw, 8rem);
  --container-max:    1200px;
  --container-wide:   1360px;
  --container-narrow: 760px;
  --gutter:           clamp(1rem, 0.4rem + 2vw, 1.5rem);
  --grid-gap:         var(--space-6);
  --header-h:         72px;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.16);
  --shadow-brand: 0 8px 24px rgba(79, 70, 229, 0.28);

  /* ---- Motion ----------------------------------------------------------- */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
  --duration-slower: 500ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  /* ---- Z-index ---------------------------------------------------------- */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-chat-widget: 1500;

  /* ---- Icon sizes ------------------------------------------------------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  color-scheme: light;
}

/* =============================================================================
   Tier 2 overrides — DARK theme
   Applied by system preference OR an explicit [data-theme] (toggle wins).
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas:       var(--slate-950);
    --bg-subtle:       var(--slate-900);
    --bg-muted:        var(--slate-800);
    --surface:         var(--slate-900);
    --surface-hover:   var(--slate-800);
    --border:          var(--slate-800);
    --border-strong:   var(--slate-700);
    --text-primary:    var(--slate-50);
    --text-secondary:  var(--slate-300);
    --text-tertiary:   var(--slate-400);
    --text-inverse:    var(--slate-900);
    --brand:           var(--indigo-400);
    --brand-hover:     var(--indigo-300);
    --brand-subtle-bg: var(--indigo-950);
    --brand-border:    var(--indigo-800);
    --accent:          var(--cyan-400);
    --link:            var(--indigo-300);

    --gradient-hero: radial-gradient(60% 60% at 50% 0%, rgba(79, 70, 229, 0.22) 0%, transparent 70%);
    --gradient-sheen: linear-gradient(180deg, rgba(148,163,184,0.10), rgba(148,163,184,0));

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
    --shadow-brand: 0 8px 28px rgba(30, 27, 75, 0.7);

    color-scheme: dark;
  }
}

/* Explicit dark toggle (wins over system preference in either direction). */
:root[data-theme="dark"] {
  --bg-canvas:       var(--slate-950);
  --bg-subtle:       var(--slate-900);
  --bg-muted:        var(--slate-800);
  --surface:         var(--slate-900);
  --surface-hover:   var(--slate-800);
  --border:          var(--slate-800);
  --border-strong:   var(--slate-700);
  --text-primary:    var(--slate-50);
  --text-secondary:  var(--slate-300);
  --text-tertiary:   var(--slate-400);
  --text-inverse:    var(--slate-900);
  --brand:           var(--indigo-400);
  --brand-hover:     var(--indigo-300);
  --brand-subtle-bg: var(--indigo-950);
  --brand-border:    var(--indigo-800);
  --accent:          var(--cyan-400);
  --link:            var(--indigo-300);

  --gradient-hero: radial-gradient(60% 60% at 50% 0%, rgba(79, 70, 229, 0.22) 0%, transparent 70%);
  --gradient-sheen: linear-gradient(180deg, rgba(148,163,184,0.10), rgba(148,163,184,0));

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-brand: 0 8px 28px rgba(30, 27, 75, 0.7);

  color-scheme: dark;
}