/* ============================================================
   MagicallySoft — Design Tokens
   The single source of truth for the entire visual system.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ── Light Mode (Default Root Variables) ─────────────────── */
:root {
  /* Brand Colors */
  --ms-primary:       #0860A8;
  --ms-primary-rgb:   8, 96, 168;
  --ms-primary-dark:  #064c85;
  --ms-primary-light: #0a75c9;
  --ms-secondary:     #373739;
  --ms-secondary-rgb: 55, 55, 57;
  --ms-accent:        #0284c7;
  --ms-accent-rgb:    2, 132, 199;

  /* Semantic */
  --ms-success:       #10b981;
  --ms-warning:       #f59e0b;
  --ms-error:         #ef4444;
  --ms-info:          #0284c7;

  /* Surfaces */
  --ms-bg:            #f8fafc;
  --ms-bg-alt:        #f1f5f9;
  --ms-surface:       #ffffff;
  --ms-surface-hover: #f1f5f9;
  --ms-surface-2:     #e2e8f0;

  /* Header Variables */
  --ms-header-bg:     rgba(255, 255, 255, 0.88);
  --ms-header-border: rgba(148, 163, 184, 0.2);
  --ms-logo-filter:   none;

  /* Text */
  --ms-text:          #0f172a;
  --ms-text-2:        #334155;
  --ms-text-3:        #64748b;
  --ms-text-on-primary: #ffffff;
  --ms-text-on-dark:  #f8fafc;

  /* Gradient Text */
  --ms-hero-gradient: linear-gradient(135deg, #0860A8 0%, #0284c7 100%);

  /* Borders */
  --ms-border:        rgba(148, 163, 184, 0.2);
  --ms-border-hover:  rgba(8, 96, 168, 0.35);
  --ms-border-strong: rgba(148, 163, 184, 0.35);

  /* Shadows */
  --ms-shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --ms-shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ms-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --ms-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
  --ms-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.06), 0 8px 10px -6px rgba(0,0,0,0.04);
  --ms-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.12);
  --ms-shadow-primary: 0 4px 14px rgba(var(--ms-primary-rgb), 0.2);
  --ms-shadow-primary-lg: 0 8px 24px rgba(var(--ms-primary-rgb), 0.25);

  /* Fonts */
  --ms-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --ms-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ms-font-mono:    'Fira Code', 'SF Mono', 'Cascadia Code', monospace;

  /* Type Scale */
  --ms-text-xs:   0.75rem;
  --ms-text-sm:   0.875rem;
  --ms-text-base: 1rem;
  --ms-text-lg:   1.125rem;
  --ms-text-xl:   1.25rem;
  --ms-text-2xl:  clamp(1.25rem, 2vw, 1.5rem);
  --ms-text-3xl:  clamp(1.5rem, 2.5vw, 1.875rem);
  --ms-text-4xl:  clamp(1.75rem, 3vw, 2.25rem);
  --ms-text-5xl:  clamp(2rem, 4vw, 3rem);
  --ms-text-6xl:  clamp(2.5rem, 5vw, 3.75rem);
  --ms-text-7xl:  clamp(3rem, 6vw, 4.5rem);

  /* Spacing (8px base) */
  --ms-sp-1:  0.25rem;  /* 4px */
  --ms-sp-2:  0.5rem;   /* 8px */
  --ms-sp-3:  0.75rem;  /* 12px */
  --ms-sp-4:  1rem;     /* 16px */
  --ms-sp-5:  1.25rem;  /* 20px */
  --ms-sp-6:  1.5rem;   /* 24px */
  --ms-sp-8:  2rem;     /* 32px */
  --ms-sp-10: 2.5rem;   /* 40px */
  --ms-sp-12: 3rem;     /* 48px */
  --ms-sp-16: 4rem;     /* 64px */
  --ms-sp-20: 5rem;     /* 80px */
  --ms-sp-24: 6rem;     /* 96px */
  --ms-sp-32: 8rem;     /* 128px */

  /* Border radius */
  --ms-radius-sm:   4px;
  --ms-radius:      8px;
  --ms-radius-md:   12px;
  --ms-radius-lg:   16px;
  --ms-radius-xl:   24px;
  --ms-radius-full: 9999px;

  /* Transitions */
  --ms-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ms-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ms-ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --ms-duration:  200ms;
  --ms-duration-md: 300ms;
  --ms-duration-lg: 500ms;

  /* Z-index layers */
  --ms-z-base:    1;
  --ms-z-dropdown: 100;
  --ms-z-sticky:  200;
  --ms-z-overlay: 300;
  --ms-z-modal:   400;
  --ms-z-toast:   500;

  /* Container */
  --ms-container: 1200px;
  --ms-container-sm: 720px;
  --ms-container-lg: 1320px;

  /* Blueprint Grid Pattern */
  --ms-grid-pattern: linear-gradient(rgba(8, 96, 168, 0.04) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(8, 96, 168, 0.04) 1px, transparent 1px);
  --ms-grid-size: 24px 24px;

  /* Header height */
  --ms-header-h: 72px;
}

/* ── Dark Mode Class Overrides (Applied to html & body) ── */
html.dark-theme,
body.dark-theme {
  --ms-bg:            #090d16;
  --ms-bg-alt:        #0e1422;
  --ms-surface:       #111726;
  --ms-surface-hover: #172033;
  --ms-surface-2:     #1e293b;

  --ms-header-bg:     rgba(9, 13, 22, 0.88);
  --ms-header-border: rgba(255, 255, 255, 0.08);
  --ms-logo-filter:   brightness(0) invert(1);

  --ms-text:          #f8fafc;
  --ms-text-2:        #cbd5e1;
  --ms-text-3:        #94a3b8;

  --ms-hero-gradient: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%);

  --ms-border:        rgba(255, 255, 255, 0.08);
  --ms-border-hover:  rgba(56, 189, 248, 0.3);
  --ms-border-strong: rgba(255, 255, 255, 0.15);

  --ms-shadow-xs:  0 1px 2px rgba(0,0,0,0.2);
  --ms-shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --ms-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --ms-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2);
  --ms-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.2);
  --ms-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.5);

  --ms-grid-pattern: linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
}

/* ── Light Mode Class Overrides (Applied to html & body) ── */
html.light-theme,
body.light-theme {
  --ms-bg:            #f8fafc;
  --ms-bg-alt:        #f1f5f9;
  --ms-surface:       #ffffff;
  --ms-surface-hover: #f1f5f9;
  --ms-surface-2:     #e2e8f0;

  --ms-header-bg:     rgba(255, 255, 255, 0.88);
  --ms-header-border: rgba(148, 163, 184, 0.2);
  --ms-logo-filter:   none;

  --ms-text:          #0f172a;
  --ms-text-2:        #334155;
  --ms-text-3:        #64748b;

  --ms-hero-gradient: linear-gradient(135deg, #0860A8 0%, #0284c7 100%);

  --ms-border:        rgba(148, 163, 184, 0.2);
  --ms-border-hover:  rgba(8, 96, 168, 0.35);
  --ms-border-strong: rgba(148, 163, 184, 0.35);

  --ms-grid-pattern: linear-gradient(rgba(8, 96, 168, 0.04) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(8, 96, 168, 0.04) 1px, transparent 1px);
}

/* ── Base Reset ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  background-color: var(--ms-bg);
  color: var(--ms-text-2);
  font-family: var(--ms-font-body);
  font-size: var(--ms-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--ms-duration-md) var(--ms-ease),
              color var(--ms-duration-md) var(--ms-ease);
  overflow-x: hidden;
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ms-font-display);
  color: var(--ms-text);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 { font-size: var(--ms-text-6xl); }
h2 { font-size: var(--ms-text-5xl); }
h3 { font-size: var(--ms-text-4xl); }
h4 { font-size: var(--ms-text-3xl); }
h5 { font-size: var(--ms-text-2xl); }
h6 { font-size: var(--ms-text-xl);  }

p {
  margin-bottom: var(--ms-sp-4);
  line-height: 1.7;
}

a {
  color: var(--ms-primary);
  text-decoration: none;
  transition: color var(--ms-duration) var(--ms-ease);
}

a:hover {
  color: var(--ms-primary-dark);
}

strong { font-weight: 600; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* ── Selection ──────────────────────────────────────────── */
::selection {
  background-color: rgba(var(--ms-primary-rgb), 0.15);
  color: var(--ms-text);
}

/* ── Focus (Accessibility) ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--ms-primary);
  outline-offset: 2px;
  border-radius: var(--ms-radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Gradient Text Utilities ────────────────────────────── */
.ms-gradient-text {
  background: var(--ms-hero-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Blueprint Grid Background ──────────────────────────── */
.ms-blueprint {
  background-image: var(--ms-grid-pattern);
  background-size: var(--ms-grid-size);
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ms-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--ms-surface-2);
  border-radius: var(--ms-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ms-text-3);
}