/* ============================================================
   Docs ONEQ · Design Tokens (v2 — Toss Blue accent)
   Brand: Navy #1F2D8C · Accent: Toss Blue #3182F6
   ============================================================ */
:root {
  /* ---- Brand (Navy scale) ---- */
  --brand:           #1F2D8C;   /* primary — CTA, logo, body emphasis */
  --brand-2:         #2D3FA0;   /* hover */
  --brand-3:         #5566C5;
  --brand-4:         #AAB5E2;
  --brand-5:         #D5DAF1;
  --brand-soft:      #D5DAF1;
  --brand-wash:      #EEF0FB;
  --brand-ink:       #0F1747;   /* darkest — headings, footer */

  /* ---- Accent (Toss Blue) ---- */
  --accent:          #3182F6;
  --accent-2:        #1B6FE8;   /* hover (darker) */
  --accent-3:        #5C9AFF;
  --accent-soft:     #EBF3FF;
  --accent-wash:     #EBF3FF;
  --accent-text:     #1554BB;

  /* ---- Surfaces / Neutrals ---- */
  --ink-0:           #0F1747;
  --ink-1:           #111827;
  --ink-2:           #1F2937;
  --ink-3:           #374151;
  --ink-4:           #4B5563;
  --ink-5:           #6B7280;
  --ink-6:           #9CA3AF;
  --ink-7:           #D1D5DB;
  --ink-8:           #E5E7EB;
  --ink-9:           #F3F4F6;
  --ink-10:          #FAFAFB;
  --paper:           #FFFFFF;

  /* ---- Semantic ---- */
  --success:         #10B981;
  --warning:         #F59E0B;
  --danger:          #EF4444;
  --info:            var(--accent);

  /* ---- Radii ---- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---- Shadow (cool navy-toned) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 71, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 71, 0.05), 0 1px 2px rgba(15, 23, 71, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 71, 0.06), 0 2px 6px rgba(15, 23, 71, 0.04);
  --shadow-lg: 0 24px 56px rgba(15, 23, 71, 0.08), 0 8px 16px rgba(15, 23, 71, 0.05);
  --shadow-xl: 0 40px 80px rgba(15, 23, 71, 0.12), 0 16px 32px rgba(15, 23, 71, 0.06);
  --shadow-glow: 0 24px 64px rgba(31, 45, 140, 0.22);
  --shadow-accent: 0 18px 40px rgba(49, 130, 246, 0.28);

  /* ---- Typography ---- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, 'Cascadia Mono', monospace;

  --t-display-1: clamp(48px, 6.4vw, 92px);
  --t-display-2: clamp(40px, 5.2vw, 72px);
  --t-h1:        clamp(32px, 3.6vw, 48px);
  --t-h2:        clamp(26px, 2.6vw, 36px);
  --t-h3:        clamp(20px, 1.8vw, 26px);
  --t-h4:        18px;
  --t-body-lg:   17px;
  --t-body:      15px;
  --t-body-sm:   14px;
  --t-caption:   12px;
  --t-overline:  11px;

  /* ---- Layout ---- */
  --container: 1280px;
  --container-narrow: 960px;
  --container-wide: 1440px;
  --gutter: 24px;
  --section-y: clamp(72px, 8vw, 128px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* ---- Gradients ---- */
  --grad-brand:      linear-gradient(135deg, #1F2D8C 0%, #2D3FA0 55%, #3182F6 100%);
  --grad-brand-deep: linear-gradient(180deg, #0F1747 0%, #1F2D8C 50%, #2D3FA0 100%);
  --grad-accent:     linear-gradient(135deg, #3182F6 0%, #5C9AFF 100%);
  --grad-paper:      linear-gradient(180deg, #ffffff 0%, #FAFAFB 100%);
  --grad-hero:       linear-gradient(120deg, #E8E5FF 0%, #FFFFFF 50%, #EBF3FF 100%);
  --grad-mesh:       radial-gradient(60% 80% at 20% 10%, rgba(49, 130, 246, 0.18), transparent 70%),
                     radial-gradient(40% 60% at 90% 20%, rgba(232, 229, 255, 0.65), transparent 75%),
                     radial-gradient(60% 80% at 50% 100%, rgba(31, 45, 140, 0.14), transparent 70%);
}

/* ---- Dark mood override (toggled by Tweaks) ---- */
[data-mood="dark"] {
  --paper: #0a0f25;
  --ink-0: #ffffff;
  --ink-1: #f3f5fa;
  --ink-2: #d8dded;
  --ink-3: #b1bad8;
  --ink-4: #8a93b6;
  --ink-5: #6c7493;
  --ink-6: #4d556f;
  --ink-7: #353c54;
  --ink-8: #232a40;
  --ink-9: #161c30;
  --ink-10: #0c111f;
  --brand-wash: #14205c;
  --accent-soft: rgba(49, 130, 246, 0.16);
  --grad-paper: linear-gradient(180deg, #0a0f25 0%, #0c111f 100%);
}

/* ---- Density override ---- */
[data-density="compact"] {
  --section-y: clamp(48px, 5vw, 80px);
  --gutter: 18px;
}
[data-density="compact"] .section-header { margin-bottom: clamp(28px, 3vw, 44px); }
[data-density="compact"] .heading-2 { font-size: clamp(22px, 2.2vw, 30px); }
[data-density="compact"] .lead { font-size: 15px; }

/* ---- Hero glow disable ---- */
body.no-hero-glow .hero-orbs { opacity: 0.18; }
body.no-hero-glow .hero-mesh { display: none; }

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  color: var(--ink-1);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02";
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit; cursor: pointer; border: none; background: none; padding: 0;
  color: inherit; -webkit-tap-highlight-color: transparent;
}
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--brand); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-8); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-7); }

/* Focus ring (Toss Blue) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}