/* ============================================================
   DJ Bank — Design Tokens
   Brand colors sampled from the official logo + product pamphlets.
   Typography follows the mobile design guide:
   - 1.25 modular scale, min caption 13px, min body 15–16px
   - title line-height 120%, body 150–160%
   - eyebrow letter-spacing -1%
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --dj-blue: #0046ff;          /* primary electric blue (logo J, wordmark) */
  --dj-blue-strong: #0038cc;   /* pressed / hover */
  --dj-blue-soft: #3a6bff;     /* lighter accent for gradients */
  --dj-sky: #8cd2f5;           /* light sky accent (logo top facet) */
  --dj-cyan: #00aaff;          /* mid cyan */

  --dj-navy: #16225c;          /* deep navy — dark sections & headings */
  --dj-navy-2: #1b2e6b;        /* navy gradient stop */

  /* ---- Neutrals ---- */
  --ink: #14213d;              /* primary text (near-navy black) */
  --ink-2: #475467;            /* secondary text */
  --ink-3: #6b7a90;            /* muted / captions */
  --line: #e4e9f2;             /* borders */
  --line-2: #eef2f9;           /* subtle dividers */

  /* ---- Surfaces ---- */
  --bg: #ffffff;
  --bg-soft: #f4f7fe;          /* light section background */
  --bg-blue-50: #eff4ff;
  --bg-blue-100: #dde9fc;
  --white: #ffffff;

  /* ---- Feedback ---- */
  --danger: #d92d20;
  --success: #12805c;

  /* ---- Effects ---- */
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, .06), 0 1px 3px rgba(20, 33, 61, .08);
  --shadow-md: 0 6px 16px rgba(20, 33, 61, .08), 0 2px 6px rgba(20, 33, 61, .05);
  --shadow-lg: 0 20px 48px rgba(16, 34, 92, .16);
  --ring: 0 0 0 4px rgba(0, 70, 255, .18);

  /* ---- Radii ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Type family ---- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;

  /* ---- Fluid type scale (mobile floor respects 13px min) ----
     Built on a ~1.25 ratio and clamped so mobile never drops below guide minimums
     while desktop scales up for impact. */
  --fs-caption: 13px;                              /* captions / legal — min */
  --fs-small:   clamp(15px, 1.6vw, 16px);          /* small body — min body */
  --fs-body:    clamp(16px, 1.8vw, 17px);          /* body */
  --fs-lead:    clamp(17px, 2.4vw, 20px);          /* hero subtitle 16–18 → up */
  --fs-h4:      clamp(18px, 2.6vw, 22px);
  --fs-h3:      clamp(20px, 3.2vw, 26px);          /* section title 20–24 → up */
  --fs-h2:      clamp(24px, 4.4vw, 40px);
  --fs-hero:    clamp(32px, 7.2vw, 60px);          /* hero title 32–40 → up on desktop */
  --fs-eyebrow: clamp(13px, 1.5vw, 15px);

  /* ---- Line heights ---- */
  --lh-title: 1.2;    /* titles 120% */
  --lh-body: 1.58;    /* body 150–160% */

  /* ---- Spacing ---- */
  --sp-section: 64px;         /* section vertical padding (mobile guide) */
  --sp-gutter: 20px;          /* page side padding */
  --container: 1120px;        /* max content width */
  --container-narrow: 760px;
}

@media (min-width: 768px) {
  :root {
    --sp-section: 96px;
    --sp-gutter: 32px;
  }
}

/* ---- Desktop tier ----
   The clamp() scale above is tuned to the mobile guide and tops out by
   ~850–950px viewport width, then stays flat — fine through tablet, but it
   means real desktop (1024px+) rendered with the same capped sizes as a
   tablet, against a much wider canvas. This tier gives desktop its own,
   more generous ceiling instead of reusing the mobile cap. */
@media (min-width: 1024px) {
  :root {
    --fs-caption: 13.5px;
    --fs-small:   clamp(15.5px, 1vw, 16.5px);
    --fs-body:    clamp(17px, 1.05vw, 18px);
    --fs-lead:    clamp(19px, 1.45vw, 22px);
    --fs-h4:      clamp(20px, 1.5vw, 24px);
    --fs-h3:      clamp(24px, 1.9vw, 30px);
    --fs-h2:      clamp(34px, 2.6vw, 46px);
    --fs-hero:    clamp(56px, 4.2vw, 72px);
    --fs-eyebrow: clamp(14px, .85vw, 15.5px);

    --sp-section: 120px;
    --sp-gutter: 40px;
    --container: 1180px;
  }
}
@media (min-width: 1440px) {
  :root {
    --sp-section: 140px;
    --container: 1240px;
  }
}