/* ==========================================================================
   MATRIX RUNWAY — GLOBAL CORE DESIGN SYSTEM (global.css)
   
   PURPOSE: 
   Contains core framework UI styles shared across the ENTIRE Matrix Runway platform:
   1. Theme Variables & Design Tokens (:root & [data-theme="dark"])
   2. Global CSS Reset & Base Typography
   3. Main Page Layout Container (.container)
   4. Skyscraper Ad Sidebars (.sample-ad-skyscraper)
   5. Button Component System (.btn, .btn-primary, .btn-secondary, .btn-ghost)
   6. Glass Cards & Containers (.glass-card)
   7. Global Utility Classes (.gradient-text, .section-label, .sr-only, etc.)
   8. Shared Keyframe Animations (float-up, fade-in)
   9. Mobile Touch & Tap UX Directives (Disables sticky hover/tap highlights on mobile)
   10. Global Toast Notification System (.toast-container, .toast)

   NOTE: Tool-specific shared styles belong in → global-tools-style.css
   Header CSS → views/partials/header.css
   Footer CSS → views/partials/footer.css
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 1: DESIGN SYSTEM TOKENS (LIGHT & DARK THEME VARIABLES)
   Defines global typography, animation timings, border radii, colors,
   shadows, and background gradients for both Light and Dark theme modes.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Light Theme Variables ── */
:root {
  /* Fonts */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    'Inter',  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Transitions */
  --transition-fast:   0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.50s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* Colours — Purple/Lavender Light Palette */
  --bg-primary:   #f5f3fc;
  --bg-secondary: #ffffff;
  --bg-tertiary:  #ede9f8;
  --bg-card:      #ffffff;

  --text-primary:   #16082e;
  --text-secondary: #5b4b80;
  --text-muted:     #9485b5;

  --purple-600:   #7c3aed;
  --purple-500:   #8b5cf6;
  --purple-400:   #a78bfa;
  --lavender-300: #c084fc;
  --lavender-200: #d8b4fe;
  --lavender-100: #ede9f8;

  --border:       rgba(109, 40, 217, 0.22);
  --border-hover: rgba(124, 58, 237, 0.45);

  --shadow-sm:   0 2px  8px  rgba(124, 58, 237, 0.06);
  --shadow-md:   0 8px  32px rgba(124, 58, 237, 0.10);
  --shadow-lg:   0 20px 60px rgba(124, 58, 237, 0.16);
  --shadow-glow: 0 0   30px  rgba(124, 58, 237, 0.25);

  --gradient-primary:  linear-gradient(135deg, #7c3aed 0%, #a78bfa 60%, #c084fc 100%);
  --gradient-secondary:linear-gradient(135deg, #ede9f8 0%, #f5f3fc 100%);
  --gradient-text:     linear-gradient(135deg, #6d28d9 0%, #a855f7 50%, #c084fc 100%);
  --gradient-hero-bg:  radial-gradient(ellipse 80% 60% at 50% -10%, rgba(139,92,246,0.18) 0%, transparent 70%);

  --nav-bg:  rgba(245, 243, 252, 0.88);
}

/* ── Dark Theme Variables ── */
[data-theme="dark"] {
  --bg-primary:   #08040f;
  --bg-secondary: #0e0a1a;
  --bg-tertiary:  #1a1332;
  --bg-card:      #120d22;

  --text-primary:   #f0ebff;
  --text-secondary: #b09dd4;
  --text-muted:     #7060a0;

  --border:       rgba(167, 139, 250, 0.24);
  --border-hover: rgba(192, 132, 252, 0.50);

  --shadow-sm:   0 2px  8px  rgba(0,0,0,0.40);
  --shadow-md:   0 8px  32px rgba(0,0,0,0.50);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.70);
  --shadow-glow: 0 0   40px  rgba(139,92,246,0.20);

  --gradient-primary:  linear-gradient(135deg, #8b5cf6 0%, #c084fc 60%, #e879f9 100%);
  --gradient-secondary:linear-gradient(135deg, #1a1332 0%, #0e0a1a 100%);
  --gradient-text:     linear-gradient(135deg, #a78bfa 0%, #c084fc 50%, #e879f9 100%);
  --gradient-hero-bg:  radial-gradient(ellipse 80% 60% at 50% -10%, rgba(139,92,246,0.12) 0%, transparent 70%);

  --nav-bg: rgba(8, 4, 15, 0.90);
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 2: GLOBAL CSS RESET & BASE TYPOGRAPHY
   Box-sizing reset, default body font setup, heading typography, anchor 
   links, custom webkit scrollbar, and accessible focus outlines.
   ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

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

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: clip;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  -webkit-font-smoothing: antialiased;
}

main, [class*="-main"] {
  padding-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

p     { color: var(--text-secondary); }
img   { max-width: 100%; display: block; }
button { font-family: var(--font-body); cursor: pointer; }

a {
  color: var(--purple-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--lavender-300); }

/* Custom Purple Scrollbar */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--purple-500); }

/* Accessible Focus Ring */
:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 3: MAIN PAGE LAYOUT & CONTAINER SYSTEM
   Calculates max content width (1360px) and allocates dynamic side margins
   for desktop skyscraper ads, plus mobile responsive container padding.
   ────────────────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

@media (min-width: 1250px) {
  .container {
    width: min(1360px, calc(100vw - 352px));
    min-width: 898px;
  }
}

@media (max-width: 860px) {
  .container {
    padding: 0 8px;
  }
}

section {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 4: SKYSCRAPER AD CONTAINER POSITIONING
   Fixed sticky side skyscraper ad units positioned outside the content 
   container for large screens >= 1250px, hidden on tablet/mobile screens.
   ────────────────────────────────────────────────────────────────────────── */
.sample-ad-skyscraper {
  position: fixed;
  top: 110px;
  width: 160px;
  height: 600px;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}

.sample-ad-skyscraper > * {
  pointer-events: auto;
}

.sample-ad-skyscraper.left-ad {
  left: calc(50% - min(1360px, calc(100vw - 352px)) / 2 - 168px);
}

.sample-ad-skyscraper.right-ad {
  right: calc(50% - min(1360px, calc(100vw - 352px)) / 2 - 168px);
}

@media (max-width: 1249px) {
  .sample-ad-skyscraper {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 5: BUTTON COMPONENT SYSTEM (.btn, .btn-primary, .btn-secondary, .btn-ghost)
   Global button styles: primary purple gradient button, secondary glass card 
   button, and ghost outline button with hover elevation effects.
   ────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn-primary {
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
}
@media (hover: hover) and (min-width: 769px) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.45);
    filter: brightness(1.08);
    color: #ffffff;
  }
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) and (min-width: 769px) {
  .btn-secondary:hover {
    border-color: var(--purple-500);
    background: var(--bg-tertiary);
    transform: translateY(-2px);
    color: var(--purple-600);
  }
}
.btn-secondary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--purple-500);
  border: 1.5px solid var(--border);
}
@media (hover: hover) and (min-width: 769px) {
  .btn-ghost:hover {
    background: var(--bg-tertiary);
    border-color: var(--purple-400);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 7: GLOBAL UTILITY CLASSES
   Gradient text fills, section headers, accessibility sr-only screen 
   reader utilities, and textarea containers with paste buttons.
   ────────────────────────────────────────────────────────────────────────── */
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--purple-500);
  background: var(--bg-tertiary);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.section-heading {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  margin-bottom: 16px;
  color: var(--text-primary);
}

.section-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 580px;
  line-height: 1.7;
}

.section-header-center {
  text-align: center;
  margin-bottom: 56px;
}
.section-header-center .section-sub { margin: 0 auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.textarea-container {
  position: relative;
  width: 100%;
}

/* Tool card container text selection disabled */
.home-tool-card,
.tool-card,
.tool-title,
.tool-name,
.tool-desc {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 8: SHARED KEYFRAME ANIMATIONS
   Keyframe animations for floating cards (float-up) and fading elements (fade-in).
   ────────────────────────────────────────────────────────────────────────── */
@keyframes float-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 9: MOBILE TOUCH & TAP UX DIRECTIVES (@media (max-width: 1024px))
   Disables grey tap highlight overlay (-webkit-tap-highlight-color) and 
   prevents sticky hover/active elevations on mobile touch devices.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  *, *::before, *::after {
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a, button, [role="button"], .btn, .card, .glass-card, 
  .explainer-card, .icon-square, .faq-card, .dt-nav-tab, 
  .dt-swatch-btn, .dt-history-btn, .dt-mobile-history-btn, 
  .tools-nav-btn, .theme-btn, .dt-dropdown-trigger, 
  .dt-dropdown-item, .tools-card, .logo, .nav-menu a,
  a:hover, a:active, button:hover, button:active,
  [role="button"]:hover, [role="button"]:active,
  .btn:hover, .btn:active, .card:hover, .card:active,
  .glass-card:hover, .glass-card:active,
  .explainer-card:hover, .explainer-card:active,
  .icon-square:hover, .icon-square:active,
  .faq-card:hover, .faq-card:active,
  .dt-nav-tab:hover, .dt-nav-tab:active,
  .dt-swatch-btn:hover, .dt-swatch-btn:active,
  .dt-history-btn:hover, .dt-history-btn:active,
  .dt-mobile-history-btn:hover, .dt-mobile-history-btn:active,
  .tools-nav-btn:hover, .tools-nav-btn:active,
  .theme-btn:hover, .theme-btn:active,
  .dt-dropdown-trigger:hover, .dt-dropdown-trigger:active,
  .dt-dropdown-item:hover, .dt-dropdown-item:active,
  .tools-card:hover, .tools-card:active {
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 10: GLOBAL TOAST NOTIFICATION SYSTEM (.toast-container, .toast)
   Floating pill toast notification popup fixed at bottom center of screen 
   with backdrop blur filter, theme support, and slide-up animation.
   ────────────────────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  width: max-content;
}

.toast, .toast-ack {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #1e1b4b;
  color: #ffffff;
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 12px 30px -4px rgba(124, 58, 237, 0.35), 0 6px 12px -4px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  white-space: nowrap;
}

[data-theme="light"] .toast, [data-theme="light"] .toast-ack {
  background: #1e1b4b;
  color: #ffffff;
}

[data-theme="dark"] .toast, [data-theme="dark"] .toast-ack {
  background: #2e1065;
  border-color: rgba(192, 132, 252, 0.4);
  color: #f3e8ff;
}

.toast.show, .toast-ack.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-icon {
  width: 18px;
  height: 18px;
  color: #a78bfa;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.toast-message {
  line-height: 1.4;
}

@media (max-width: 768px) {
  .toast-container {
    bottom: 24px;
    max-width: calc(100vw - 24px);
  }
  .toast, .toast-ack {
    padding: 10px 18px;
    font-size: 0.85rem;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .toast-container {
    bottom: 20px;
    max-width: calc(100vw - 20px);
  }
  .toast, .toast-ack {
    padding: 9px 16px;
    font-size: 0.82rem;
    gap: 8px;
  }
}