/* ==========================================================================
   CraftX Tech — Design Tokens (Light & Dark Themes)
   Software Studio & Digital Product Company (Mobile Apps & Web Platforms)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Primitive Palette Tokens (Shared Values)
     ------------------------------------------------------------------------ */
  --primitive-black: #03060a;
  --primitive-obsidian: #080c15;
  --primitive-slate-950: #0c111d;
  --primitive-slate-900: #101728;
  --primitive-slate-850: #151f36;
  --primitive-slate-800: #1e293b;
  --primitive-slate-700: #334155;
  --primitive-slate-600: #475569;
  --primitive-slate-500: #64748b;
  --primitive-slate-400: #94a3b8;
  --primitive-slate-300: #cbd5e1;
  --primitive-slate-200: #e2e8f0;
  --primitive-slate-100: #f1f5f9;
  --primitive-slate-50: #f8fafc;
  --primitive-white: #ffffff;

  --primitive-blue-400: #60a5fa;
  --primitive-blue-500: #3b82f6;
  --primitive-blue-600: #2563eb;
  --primitive-blue-700: #1d4ed8;

  --primitive-cyan-400: #22d3ee;
  --primitive-cyan-500: #06b6d4;

  --primitive-mint-400: #34d399;
  --primitive-mint-500: #10b981;
  --primitive-mint-600: #059669;

  --primitive-amber-400: #fbbf24;
  --primitive-amber-500: #f59e0b;

  --primitive-orange-500: #f97316;
  --primitive-orange-600: #ea580c;
  --primitive-orange-700: #c2410c;

  --primitive-red-500: #ef4444;

  /* ------------------------------------------------------------------------
     2. Typography Tokens
     ------------------------------------------------------------------------ */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;

  /* ------------------------------------------------------------------------
     3. Geometry & Radius
     ------------------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------------
     4. Layout & Spacing
     ------------------------------------------------------------------------ */
  --container: 1240px;
  --container-narrow: 860px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 104px;

  /* ------------------------------------------------------------------------
     5. Default Semantic Variables (Dark Theme by default)
     ------------------------------------------------------------------------ */
  --bg-canvas: var(--primitive-obsidian);
  --bg-surface-base: var(--primitive-slate-950);
  --bg-surface-card: var(--primitive-slate-900);
  --bg-surface-elevated: var(--primitive-slate-850);
  --bg-surface-glass: rgba(12, 17, 29, 0.82);
  --bg-surface-subtle: rgba(255, 255, 255, 0.035);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-hover: rgba(59, 130, 246, 0.45);
  --border-active: var(--primitive-blue-500);

  --text-primary: var(--primitive-slate-50);
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: var(--primitive-slate-950);

  --accent-brand: #38bdf8;
  --accent-brand-dark: #2563eb;
  --accent-brand-glow: rgba(56, 189, 248, 0.28);

  --accent-cta: #ffffff;
  --accent-cta-hover: #f1f5f9;
  --accent-cta-glow: rgba(255, 255, 255, 0.25);

  --btn-primary-bg: #ffffff;
  --btn-primary-text: #080c15;
  --btn-primary-border: #ffffff;
  --btn-primary-shadow: 0 4px 18px rgba(255, 255, 255, 0.22);
  --btn-primary-hover-bg: #e2e8f0;
  --btn-primary-hover-shadow: 0 6px 24px rgba(255, 255, 255, 0.35);

  --btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --btn-secondary-text: #ffffff;
  --btn-secondary-border: rgba(255, 255, 255, 0.16);
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.14);

  --card-bg: rgba(13, 19, 34, 0.72);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --section-band-bg: linear-gradient(180deg, rgba(12, 18, 33, 0.85) 0%, rgba(8, 12, 21, 0.95) 100%);
  --section-band-border: rgba(255, 255, 255, 0.08);

  --tag-bg: rgba(255, 255, 255, 0.06);
  --tag-border: rgba(255, 255, 255, 0.12);
  --tag-text: #f1f5f9;

  --badge-text: #38bdf8;
  --badge-bg: rgba(56, 189, 248, 0.1);
  --badge-border: rgba(56, 189, 248, 0.3);

  --status-success: #34d399;
  --status-success-bg: rgba(52, 211, 153, 0.15);
  --status-warning: var(--primitive-amber-400);
  --status-warning-bg: rgba(251, 191, 36, 0.15);
  --status-error: var(--primitive-red-500);
  --mono-code: var(--primitive-cyan-400);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.65);
  --glow-brand: 0 0 24px var(--accent-brand-glow);
  --glow-cta: 0 0 24px var(--accent-cta-glow);
  --nav-island-bg: rgba(12, 17, 29, 0.88);
  --nav-island-border: rgba(255, 255, 255, 0.12);
  --nav-island-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);

  --grid-dot-color: rgba(255, 255, 255, 0.07);

  --hero-aura-1: rgba(37, 99, 235, 0.28);
  --hero-aura-2: rgba(34, 211, 238, 0.2);
  --hero-aura-3: rgba(59, 130, 246, 0.1);
}

/* --------------------------------------------------------------------------
   Light Theme Override ([data-theme="light"])
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --bg-canvas: #f8fafc;
  --bg-surface-base: #ffffff;
  --bg-surface-card: #ffffff;
  --bg-surface-elevated: #f1f5f9;
  --bg-surface-glass: rgba(255, 255, 255, 0.92);
  --bg-surface-subtle: #f1f5f9;

  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.14);
  --border-hover: rgba(37, 99, 235, 0.5);
  --border-active: #2563eb;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  --accent-brand: #0284c7;
  --accent-brand-dark: #0369a1;
  --accent-brand-glow: rgba(2, 132, 199, 0.2);

  --accent-cta: #0f172a;
  --accent-cta-hover: #1e293b;
  --accent-cta-glow: rgba(15, 23, 42, 0.25);

  --btn-primary-bg: #0f172a;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #0f172a;
  --btn-primary-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  --btn-primary-hover-bg: #1e293b;
  --btn-primary-hover-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);

  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #0f172a;
  --btn-secondary-border: rgba(15, 23, 42, 0.18);
  --btn-secondary-hover-bg: #f8fafc;

  --card-bg: #ffffff;
  --card-border: rgba(15, 23, 42, 0.08);
  --card-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03);
  --section-band-bg: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  --section-band-border: rgba(15, 23, 42, 0.08);

  --tag-bg: #f1f5f9;
  --tag-border: #e2e8f0;
  --tag-text: #1e293b;

  --badge-text: #0284c7;
  --badge-bg: rgba(2, 132, 199, 0.08);
  --badge-border: rgba(2, 132, 199, 0.25);

  --status-success: #059669;
  --status-success-bg: rgba(5, 150, 105, 0.1);
  --status-warning: #d97706;
  --status-warning-bg: rgba(217, 119, 6, 0.1);
  --status-error: #dc2626;
  --mono-code: #0284c7;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12);
  --glow-brand: 0 0 24px var(--accent-brand-glow);
  --glow-cta: 0 0 24px var(--accent-cta-glow);
  --nav-island-bg: rgba(255, 255, 255, 0.92);
  --nav-island-border: rgba(15, 23, 42, 0.1);
  --nav-island-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);

  --grid-dot-color: rgba(15, 23, 42, 0.07);

  --hero-aura-1: rgba(37, 99, 235, 0.14);
  --hero-aura-2: rgba(2, 132, 199, 0.1);
  --hero-aura-3: rgba(59, 130, 246, 0.05);
}

/* --------------------------------------------------------------------------
   Dark Theme Explicit Override ([data-theme="dark"])
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-canvas: var(--primitive-obsidian);
  --bg-surface-base: var(--primitive-slate-950);
  --bg-surface-card: var(--primitive-slate-900);
  --bg-surface-elevated: var(--primitive-slate-850);
  --bg-surface-glass: rgba(12, 17, 29, 0.82);
  --bg-surface-subtle: rgba(255, 255, 255, 0.035);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-hover: rgba(56, 189, 248, 0.45);
  --border-active: #38bdf8;

  --text-primary: var(--primitive-slate-50);
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: var(--primitive-slate-950);

  --accent-brand: #38bdf8;
  --accent-brand-dark: #2563eb;
  --accent-brand-glow: rgba(56, 189, 248, 0.28);

  --accent-cta: #ffffff;
  --accent-cta-hover: #f1f5f9;
  --accent-cta-glow: rgba(255, 255, 255, 0.25);

  --btn-primary-bg: #ffffff;
  --btn-primary-text: #080c15;
  --btn-primary-border: #ffffff;
  --btn-primary-shadow: 0 4px 18px rgba(255, 255, 255, 0.22);
  --btn-primary-hover-bg: #e2e8f0;
  --btn-primary-hover-shadow: 0 6px 24px rgba(255, 255, 255, 0.35);

  --btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --btn-secondary-text: #ffffff;
  --btn-secondary-border: rgba(255, 255, 255, 0.16);
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.14);

  --card-bg: rgba(13, 19, 34, 0.72);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --section-band-bg: linear-gradient(180deg, rgba(12, 18, 33, 0.85) 0%, rgba(8, 12, 21, 0.95) 100%);
  --section-band-border: rgba(255, 255, 255, 0.08);

  --tag-bg: rgba(255, 255, 255, 0.06);
  --tag-border: rgba(255, 255, 255, 0.12);
  --tag-text: #f1f5f9;

  --badge-text: #38bdf8;
  --badge-bg: rgba(56, 189, 248, 0.1);
  --badge-border: rgba(56, 189, 248, 0.3);

  --status-success: #34d399;
  --status-success-bg: rgba(52, 211, 153, 0.15);
  --status-warning: var(--primitive-amber-400);
  --status-warning-bg: rgba(251, 191, 36, 0.15);
  --status-error: var(--primitive-red-500);
  --mono-code: var(--primitive-cyan-400);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.65);
  --glow-brand: 0 0 24px var(--accent-brand-glow);
  --glow-cta: 0 0 24px var(--accent-cta-glow);
  --nav-island-bg: rgba(12, 17, 29, 0.88);
  --nav-island-border: rgba(255, 255, 255, 0.12);
  --nav-island-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);

  --grid-dot-color: rgba(255, 255, 255, 0.07);

  --hero-aura-1: rgba(37, 99, 235, 0.28);
  --hero-aura-2: rgba(34, 211, 238, 0.2);
  --hero-aura-3: rgba(59, 130, 246, 0.1);
}