/**
 * StarShed Theme Design Tokens & CSS Variables
 * Inspired by Converta SaaS Theme (preview.codeless.co/converta/default/saas/)
 *
 * Light, crisp, ultra-modern SaaS aesthetic.
 * Space Grotesk headings + Plus Jakarta Sans body.
 * Electric Indigo & Violet accents with subtle ambient purple mesh glow.
 *
 * @package StarShed
 * @since 2.3.0
 */

:root {
  /* ========================================================================
     1. CANVASES & SECTION BACKDROPS (Converta Clean Light Aesthetic)
     ======================================================================== */
  --bg-page: #ffffff;
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.82);
  --bg-glass-heavy: rgba(255, 255, 255, 0.95);
  --bg-dark-preview: #0f172a;
  --bg-pill: #eef2ff;

  /* Section Backdrops */
  --backdrop-hero: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --backdrop-alt: #f8fafc;
  --backdrop-white: #ffffff;

  /* ========================================================================
     2. HIGH-CONTRAST TYPOGRAPHY (Deep Obsidian Slate & Rich Ink)
     ======================================================================== */
  --text-main: #0f172a;       /* Slate 900 - sharp, punchy readability */
  --text-secondary: #475569;  /* Slate 600 - comfortable body copy */
  --text-muted: #64748b;      /* Slate 500 - elegant metadata */
  --text-dim: #94a3b8;        /* Slate 400 - faint details */
  --text-inverse: #ffffff;    /* White text for dark cards & buttons */

  /* ========================================================================
     3. BRAND COLOR PALETTE (Converta Electric Indigo & Violet)
     ======================================================================== */
  --brand-primary: #4f46e5;         /* Electric Indigo */
  --brand-primary-hover: #4338ca;   /* Deep Indigo */
  --brand-accent: #6366f1;          /* Bright Violet */
  --brand-dark: #321370;            /* Converta Midnight Purple */
  --brand-light: #eef2ff;           /* Indigo-50 background tint */
  --brand-glow: rgba(99, 102, 241, 0.20);
  --brand-glow-converta: 0px 10px 36px 13px rgba(133, 127, 255, 0.13);
  --brand-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
  --brand-gradient-dark: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
  --brand-border: rgba(99, 102, 241, 0.24);

  /* Unified Product Tokens */
  --kidzlive-primary: #4f46e5;
  --kidzlive-secondary: #06b6d4;
  --kidzlive-glow: rgba(79, 70, 229, 0.25);

  --starbill-primary: #2563eb;
  --starbill-secondary: #0284c7;
  --starbill-glow: rgba(37, 99, 235, 0.25);

  --starcraft-primary: #7c3aed;
  --starcraft-secondary: #ec4899;
  --starcraft-glow: rgba(124, 58, 237, 0.25);

  /* Semantic State Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* ========================================================================
     4. DELICATE BORDERS & FRAMES
     ======================================================================== */
  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-strong: #94a3b8;
  --border-brand: rgba(99, 102, 241, 0.22);
  --border-light: rgba(226, 232, 240, 0.8);

  /* ========================================================================
     5. TYPOGRAPHY & SIZING
     ======================================================================== */
  --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --container-max: 1220px;
  --container-narrow: 940px;
  --header-height: 76px;

  /* Border Radiuses */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ========================================================================
     6. ELEVATION & SHADOWS
     ======================================================================== */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 28px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 20px 40px -10px rgba(99, 102, 241, 0.14), 0 4px 10px rgba(15, 23, 42, 0.04);
  --shadow-converta: 0px 10px 36px 13px rgba(133, 127, 255, 0.13);
  --shadow-pill: 0 4px 16px rgba(79, 70, 229, 0.28);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}