/* =========================================================================
   Jano Payment — Design Tokens
   Foundation: WizClass system (Pretendard, type scale, spacing, motion)
   Color:      Jano brand brief — deep navy + cobalt point, red whale accent
   ========================================================================= */

@font-face {
  font-family: "Pretendard";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url("../assets/fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  /* ── Fonts ── */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Noto Sans KR", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── Navy ramp (brand core) ── */
  --navy-950: #06112A;   /* deepest — hero floor, footer */
  --navy-900: #0A1A38;   /* hero / dark sections base */
  --navy-800: #0E2147;
  --navy-700: #14305F;
  --navy-600: #1A3A6B;   /* PRIMARY brand navy */
  --navy-500: #244B86;
  --navy-400: #3A639F;

  /* ── Cobalt (signal accent / interactive) ── */
  --cobalt:        #2F6BFF;   /* primary accent */
  --cobalt-bright: #5A8CFF;
  --cobalt-deep:   #1E54E0;
  --cobalt-soft:   #EAF1FF;   /* tint background */
  --cobalt-glow:   rgba(47,107,255,0.35);

  /* ── Whale red (logo mark accent, used sparingly) ── */
  --whale-red:     #C8323A;
  --whale-red-soft:#FBEAEB;

  /* ── Neutrals — cool grey ramp ── */
  --white:    #FFFFFF;
  --mist:     #F4F7FC;   /* light section bg */
  --ice:      #EAF0FA;   /* subtle contrast */
  --cloud:    #DCE6F4;
  --line:     #DCE4F0;   /* hairline border */
  --line-strong: #C2D0E6;
  --slate-700:#2A3B57;
  --slate-600:#445576;   /* secondary text */
  --slate-500:#6B7B9A;   /* tertiary text */
  --slate-400:#94A2BE;   /* faint / placeholder */

  /* ── Semantic (light theme default) ── */
  --bg:           var(--white);
  --bg-subtle:    var(--mist);
  --bg-elevated:  var(--white);
  --bg-inverse:   var(--navy-900);

  --fg:           var(--navy-900);
  --fg-muted:     var(--slate-600);
  --fg-subtle:    var(--slate-500);
  --fg-faint:     var(--slate-400);
  --fg-inverse:   var(--white);

  --accent:       var(--cobalt);
  --accent-fg:    var(--white);
  --accent-hover: var(--cobalt-deep);

  --border:       var(--line);
  --border-strong:var(--line-strong);

  /* ── Radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ── Shadows (navy-tinted) ── */
  --shadow-xs: 0 1px 2px rgba(10,26,56,0.05);
  --shadow-sm: 0 2px 10px rgba(10,26,56,0.07);
  --shadow-md: 0 10px 30px rgba(10,26,56,0.10);
  --shadow-lg: 0 24px 60px rgba(10,26,56,0.16);
  --shadow-xl: 0 40px 90px rgba(10,26,56,0.22);
  --shadow-glow: 0 16px 50px var(--cobalt-glow);

  /* ── Spacing (4px base) ── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 150ms;
  --dur: 280ms;
  --dur-slow: 620ms;
  --dur-cine: 900ms;

  /* ── Type scale ── */
  --display-xl: clamp(48px, 6.4vw, 104px);
  --display-lg: clamp(40px, 5vw, 76px);
  --h1: clamp(34px, 3.6vw, 52px);
  --h2: clamp(28px, 2.8vw, 40px);
  --h3: 26px;
  --h4: 20px;
  --eyebrow-track: 0.18em;

  --layout-max: 1240px;
  --layout-pad: 32px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
}
.tnum { font-variant-numeric: tabular-nums lining-nums; }