/* ═══════════════════════════════════════════════════════
   SHIELD Design System v3.0 — Swiss Minimalism
   Inspired by UI UX Pro Max (Minimalism & Swiss Style)
   ═══════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
html, body { background: #FAFAFA; }
:root {
  /* Surfaces */
  --bg-primary: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-elevated: #F5F5F5;
  --bg-accent: rgba(37, 99, 235, 0.04);
  
  /* Text */
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-tertiary: #737373;
  
  /* Accent */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-soft: rgba(235, 105, 9, 0.08);
  
  /* Borders & Dividers */
  --border: #E5E5E5;
  --border-subtle: #F0F0F0;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  
  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Noto Sans KR', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', monospace;
}

/* ── Dark Mode ── */
body.dark {
  --bg-primary: #0A0A0A;
  --bg-card: #171717;
  --bg-elevated: #1F1F1F;
  --bg-accent: rgba(235, 105, 9, 0.08);
  --text-primary: #F5F5F5;
  --text-secondary: #A3A3A3;
  --text-tertiary: #737373;
  --border: #2A2A2A;
  --border-subtle: #222222;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ── Global Reset ── */
html, body {
  margin: 0; padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: background var(--transition-base), color var(--transition-base);
  -webkit-font-smoothing: antialiased;
}

/* ── !important Dark Overrides ── */
body.dark { background: #0A0A0A !important; }
body.dark [style*="linear-gradient"] { background: #0A0A0A !important; }
body.dark [style*="background:linear"] { background: #0A0A0A !important; }
body.dark [style*="backdrop-filter"] { background: #171717 !important; }
body.dark [style*="box-shadow:0 1px"] { box-shadow: none !important; }
body.dark [style*="box-shadow: 0 1px"] { box-shadow: none !important; }

body.dark section { background: #0A0A0A !important; }
body.dark [style*="background:#FAFAFA"],
body.dark [style*="background: #FAFAFA"],
body.dark [style*="background:#F5F5F7"],
body.dark [style*="background: #F5F5F7"],
body.dark [style*="background:#F4F2EF"],
body.dark [style*="background: #F4F2EF"],
body.dark [style*="background: #fafafa"],
body.dark [style*="background: #F5f5f7"],
body.dark [style*="background:rgb(250"] { background: #0A0A0A !important; }

body.dark [style*="background:#FFFFFF"],
body.dark [style*="background: #FFFFFF"],
body.dark [style*="background:#FFF;"],
body.dark [style*="background:#fff;"],
body.dark [style*="background:white"],
body.dark [style*="background: white"],
body.dark [style*="background:rgb(255"] { background: #171717 !important; }

body.dark [style*="color:#1D1D1F"],
body.dark [style*="color: #1D1D1F"],
body.dark [style*="color:#171717"],
body.dark [style*="color: #171717"],
body.dark [style*="color:rgb(23"] { color: #F5F5F5 !important; }

body.dark [style*="color:#6B6B73"],
body.dark [style*="color: #6B6B73"],
body.dark [style*="color:#525252"],
body.dark [style*="color: #525252"],
body.dark [style*="color:rgb(82"] { color: #A3A3A3 !important; }

body.dark [style*="color:#737373"],
body.dark [style*="color: #737373"],
body.dark [style*="color:rgb(115"] { color: #9CA3AF !important; }

body.dark [style*="border-color:rgba(0,0,0"],
body.dark [style*="border:1px solid #E5E5E5"],
body.dark [style*="border: 1px solid #E5E5E5"],
body.dark [style*="border-top:1px solid #F0F0F0"],
body.dark [style*="border-top: 1px solid #F0F0F0"],
body.dark [style*="border-bottom:1px solid #E5E5E5"] { border-color: #2A2A2A !important; }

body.dark [style*="rgba(37,99,235,0.05)"],
body.dark [style*="rgba(235, 105, 9, 0.04)"] { background: rgba(37,99,235,0.10) !important; }

body.dark [style*="rgba(37,99,235,0.06)"],
body.dark [style*="rgba(235, 105, 9, 0.08)"] { background: rgba(37,99,235,0.14) !important; }

body.dark img[src*="lloydk-logo.png"] { filter: brightness(0) invert(1); }

/* ── Typography Scale ── */
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: 44px; font-weight: 700; }
.h-label { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }

/* ── Card System ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ── Buttons ── */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 18px; cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* ── Accessibility ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ── Print ── */
@media print {
  body, section { background: white !important; color: black !important; }
  .btn-ghost, #rail-toggle, #theme-toggle { display: none !important; }
}