/* ==========================================================================
   FNN Design System - FastNetNow Helpdesk
   Glassmorphism specification matching dashboard
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Primary — aligned to shared design system (CLAUDE.md canonical) */
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-pressed: #1d4ed8;
  --primary-glow: #60a5fa;
  --primary-deep: #2563eb;
  --primary-light: #dbeafe;

  /* Shared design system canonical names */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-accent: #60a5fa;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-gold: #E8B84B;
  --color-gold-glow: rgba(232, 184, 75, 0.22);
  --color-gold-hover: rgba(232, 184, 75, 0.45);
  --color-gold-dark: #C9962D;
  --bg-primary: #0a1628;
  --bg-secondary: #0f1d32;

  /* Semantic */
  --info: #2080F0;
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --error-hover: #DC2626;

  /* Surfaces - Light Mode */
  --container-bg: rgb(248, 250, 255);
  --layout-bg: rgb(237, 242, 251);
  --inverted-bg: rgb(8, 20, 42);
  --base-text: rgb(15, 23, 42);
  --muted-text: rgb(100, 116, 139);

  /* Accent — aligned to CLAUDE.md canonical gold */
  --gold: #E8B84B;
  --accent-blue: #3b82f6;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.32);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-bg-secondary: rgba(255, 255, 255, 0.2);
  --glass-border-secondary: rgba(255, 255, 255, 0.3);

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-base: 16px;
  --sp-lg: 20px;
  --sp-xl: 24px;
  --sp-2xl: 28px;
  --sp-3xl: 32px;
  --sp-4xl: 48px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;

  /* Shadows */
  --shadow-header: 0 1px 2px rgb(8 47 73 / 0.10);
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-glass: 0 14px 40px 0 rgba(31, 38, 135, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  --shadow-glass-hover: 0 32px 96px 0 rgba(31, 38, 135, 0.35), inset 0 2px 0 0 rgba(255, 255, 255, 0.9);

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: 'JetBrains Mono', "Cascadia Code", "Fira Code", "Courier New", monospace;

  /* Easing */
  /* --ease-spring simulates a gentle overshoot — used for logo hover scale
     so the pop feels lively rather than mechanical. cubic-bezier values
     chosen to match the dashboard's spring constant. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  /* Aligned to shared design system standard (56px for app services) */
  --header-height: 56px;
  --footer-height: 48px;
}

/* ---------- Dark Mode Overrides ---------- */
html.dark {
  --container-bg: rgb(15, 23, 42);
  --layout-bg: rgb(8, 15, 30);
  --base-text: rgb(226, 232, 240);
  --muted-text: rgb(148, 163, 184);
  --gold: #FFD700;

  --glass-bg: rgba(18, 18, 18, 0.6);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-bg-secondary: rgba(255, 255, 255, 0.1);
  --glass-border-secondary: rgba(255, 255, 255, 0.15);

  --shadow-glass: 0 24px 72px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
  --shadow-glass-hover: 0 32px 96px 0 rgba(0, 0, 0, 0.7), inset 0 2px 0 0 rgba(255, 255, 255, 0.3);
}

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

html {
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--base-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background: var(--layout-bg);
  color: var(--base-text);
  overflow-x: hidden;
}

/* ---------- Typography ---------- */
.text-hero     { font-size: 36px; font-weight: 700; }
.text-title    { font-size: 28px; font-weight: 500; }
.text-section  { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.text-card     { font-size: 16px; font-weight: 700; }
.text-module   { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.text-body     { font-size: 14px; font-weight: 400; }
.text-small    { font-size: 13px; font-weight: 500; }
.text-fine     { font-size: 12px; font-weight: 500; letter-spacing: -0.01em; }
.text-mono     { font-family: var(--font-mono); }

/* ---------- Glassmorphism ---------- */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(60px) saturate(1.4);
  -webkit-backdrop-filter: blur(60px) saturate(1.4);
  border-radius: var(--radius-3xl);
  border: 1px solid var(--glass-border);
  padding: var(--sp-base) var(--sp-2xl);
  box-shadow: var(--shadow-glass);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* SVG noise texture overlay */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.glass-card > * {
  position: relative;
  z-index: 1;
}

.glass-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glass-hover);
}

.glass-card--static:hover {
  transform: none;
  box-shadow: var(--shadow-glass);
}

.glass-card-secondary {
  background: var(--glass-bg-secondary);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border-secondary);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Noise texture on secondary cards too */
.glass-card-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.glass-card-secondary > * {
  position: relative;
  z-index: 1;
}

.glass-card-secondary:hover {
  box-shadow: 0 20px 60px rgba(31, 38, 135, 0.2);
}

html.dark .glass-card-secondary:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

html.dark .glass-card::before,
html.dark .glass-card-secondary::before {
  opacity: 0.04;
}

@supports not (backdrop-filter: blur(60px)) {
  .glass-card { background: rgba(255, 255, 255, 0.96); }
  html.dark .glass-card { background: rgba(15, 23, 42, 0.96); }
  .glass-card-secondary { background: rgba(255, 255, 255, 0.9); }
  html.dark .glass-card-secondary { background: rgba(15, 23, 42, 0.9); }
}

/* ---------- Scrollbar (aligned to shared design system) ---------- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(255, 255, 255, 0.15); }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.3); }
::-webkit-scrollbar-track { border-radius: 10px; }

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

/* ---------- Animation Toggle ---------- */
html.no-anim *,
html.no-anim *::before,
html.no-anim *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html.no-anim #bg-lightning-canvas {
  display: none;
}

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

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* ---------- Skip Navigation ---------- */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: var(--sp-sm) var(--sp-base);
  background: var(--primary);
  color: white;
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 var(--radius-md) 0;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-nav:focus {
  top: 0;
  color: white;
}

/* ---------- Global Focus-Visible ---------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

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