/* ─────────────────────────────────────────────────────────────
   Sejong Kim Sungho Bike — Design Tokens
   Source of truth: 김성호바이크 세종점 홈페이지(homepage_draft.html)
   Brand layer: Specialized × 김성호바이크 세종점
   ───────────────────────────────────────────────────────────── */

/* ----- FONTS ----- */
/* Pretendard via CDN */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* ═══ ATOMIC — BRAND ════════════════════════════════════════ */
  /* Specialized Red — PRIMARY CTA, brand mark */
  --red-50:   #FFE5E6;
  --red-100:  #FFDAD9;
  --red-400:  #F04148;
  --red-500:  #E31E26;   /* ★ PRIMARY */
  --red-600:  #C01019;   /* hover */
  --red-700:  #9A0E14;

  /* Sejong Orange — SECONDARY accent, highlight */
  --orange-50:  #FFE9D2;
  --orange-100: #FFDDB2;
  --orange-500: #FF6B00;
  --orange-600: #E65F00;

  /* ═══ ATOMIC — NEUTRAL ═════════════════════════════════════ */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F8F8F8;
  --neutral-100:  #F3F3F3;   /* ★ card / sunken surface */
  --neutral-200:  #E5E5E5;
  --neutral-300:  #C4C6D0;
  --neutral-400:  #A1A1A1;
  --neutral-500:  #74777F;
  --neutral-600:  #44474E;
  --neutral-700:  #393939;   /* ★ news badge */
  --neutral-800:  #1E1E1E;   /* ★ dark surface (hero/news/footer) */
  --neutral-900:  #1B1B1F;   /* primary ink */
  --neutral-950:  #0E0E10;
  --neutral-1000: #000000;

  /* ═══ ATOMIC — SEMANTIC ════════════════════════════════════ */
  --success-50:  #E5F8EE;
  --success-500: #22C55E;
  --error-50:    #FEEDED;
  --error-500:   #BA1A1A;
  --warning-50:  #FFF4E0;
  --warning-500: #F59E0B;
  --info-500:    #3B82F6;

  /* ═══ SEMANTIC — FOREGROUND ════════════════════════════════ */
  --fg-primary:     #1B1B1F;   /* body, headings */
  --fg-secondary:   #44474E;   /* sub copy */
  --fg-tertiary:    #74777F;   /* meta / caption */
  --fg-quaternary:  #A1A1A1;   /* disabled / placeholder */
  --fg-inverse:     #FFFFFF;
  --fg-brand:       var(--red-500);   /* ★ */
  --fg-accent:      var(--orange-500);
  --fg-success:     var(--success-500);
  --fg-error:       var(--error-500);
  --fg-warning:     var(--warning-500);

  /* Legacy aliases (current preview cards reference these) */
  --fg-neutral-primary: var(--fg-primary);
  --fg-neutral-strong:  var(--fg-secondary);
  --fg-neutral:         var(--fg-tertiary);
  --fg-neutral-subtle:  var(--fg-tertiary);
  --fg-neutral-muted:   var(--fg-quaternary);
  --fg-neutral-inverse: var(--fg-inverse);

  /* ═══ SEMANTIC — BACKGROUND ════════════════════════════════ */
  --bg-page:            #FFFFFF;
  --bg-surface:         #FFFFFF;
  --bg-surface-sunken:  #F3F3F3;   /* product cards, "오직 세종점" cards */
  --bg-tint:            #F8F8F8;
  --bg-dark:            #1E1E1E;   /* Hero / News / Footer background */
  --bg-dark-elevated:   #393939;   /* News badge, review card */
  --bg-black:           #000000;   /* Hero overlay, sticky bar */
  --bg-brand:           var(--red-500);
  --bg-brand-subtle:    var(--red-50);
  --bg-accent:          var(--orange-500);
  --bg-accent-subtle:   var(--orange-50);
  --bg-inverse:         var(--neutral-900);

  /* ═══ LINE / BORDER ════════════════════════════════════════ */
  --line:          #E5E5E5;
  --line-strong:   #C4C6D0;
  --line-subtle:   rgba(0,0,0,0.06);
  --line-inverse:  rgba(255,255,255,0.16);

  /* ═══ ELEVATION ════════════════════════════════════════════ */
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.10);
  --shadow:            0 4px 12px rgba(0,0,0,0.08);
  --shadow-md:         0 12px 32px rgba(0,0,0,0.12);
  --shadow-lg:         0 20px 40px rgba(0,0,0,0.12);
  --shadow-card-hover: 0 20px 40px rgba(0,0,0,0.10);
  --shadow-cta-red:    0 4px 16px rgba(227,30,38,0.35);

  /* ═══ RADIUS ═══════════════════════════════════════════════ */
  --radius-xs:    4px;    /* small badges, inputs */
  --radius-sm:    8px;    /* ★ product card (default) */
  --radius-md:    12px;   /* large card, modal, hero CTA on dark */
  --radius-lg:    16px;   /* review card, sejong-only card */
  --radius-xl:    24px;   /* large modal */
  --radius-pill:  100px;  /* ★ CTA buttons, filter chips */

  /* ═══ SPACING (4 / 8px grid) ═══════════════════════════════ */
  --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-30: 120px;

  /* ═══ LAYOUT — Figma 실측 (1920 canvas) ════════════════════ */
  --container-max:    1920px;
  --container-inner:  1440px;
  --container-pad:    24px;
  --container-pad-lg: 40px;   /* showcase / sejong-only inner */

  --section-pt:    80px;
  --section-pb:    120px;
  --section-gap:   60px;      /* heading → content cluster */
  --card-pad:      32px;      /* curation / sejong-only card 내부 */
  --card-gap:      20px;      /* card 간 간격 */

  --gnb-h:         80px;
  --gnb-h-mobile:  56px;
  --tabbar-h:      56px;

  /* ═══ BREAKPOINTS ══════════════════════════════════════════ */
  --bp-sm:  576px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1200px;
  --bp-2xl: 1440px;

  /* ═══ TOUCH TARGETS (WCAG 2.1 AA) ══════════════════════════ */
  --touch-cta:   48px;
  --touch-chip:  36px;
  --touch-min:   44px;

  /* ═══ TYPE — FAMILY ════════════════════════════════════════ */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont,
                'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif;
  --font-display: 'Pretendard', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, Monaco, 'Cascadia Mono', monospace;

  /* ═══ TYPE — SCALE (homepage Figma 실측) ═══════════════════ */
  /* Display */
  --type-hero:        700 60px/1.10 var(--font-sans);   /* Hero headline */
  --type-display-lg:  700 40px/1.20 var(--font-sans);   /* "오직 세종점" 등 섹션 타이틀 LG */
  --type-display:     700 32px/1.25 var(--font-sans);   /* 일반 섹션 타이틀 */
  /* Heading */
  --type-h1:          700 24px/1.40 var(--font-sans);
  --type-h2:          700 20px/1.45 var(--font-sans);   /* news / sejong-card title */
  --type-h3:          600 18px/1.45 var(--font-sans);   /* product name */
  --type-h4:          600 16px/1.50 var(--font-sans);
  /* Body */
  --type-body-lg:     400 17px/1.55 var(--font-sans);
  --type-body:        400 16px/1.60 var(--font-sans);
  --type-body-sm:     400 14px/1.55 var(--font-sans);
  --type-body-xs:     400 13px/1.50 var(--font-sans);
  --type-reading:     400 16px/1.65 var(--font-sans);
  /* UI */
  --type-label:       600 14px/1.30 var(--font-sans);
  --type-label-sm:    600 12px/1.30 var(--font-sans);
  --type-caption:     500 12px/1.40 var(--font-sans);
  --type-overline:    700 11px/1.30 var(--font-sans);

  /* ═══ TRACKING ═════════════════════════════════════════════ */
  --tracking-hero:     -0.03em;
  --tracking-display:  -0.025em;
  --tracking-heading:  -0.02em;
  --tracking-body:     -0.01em;
  --tracking-label:     0;
  --tracking-overline:  0.06em;

  /* ═══ MOTION ═══════════════════════════════════════════════ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-decel:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;

  /* ═══ Z-INDEX ══════════════════════════════════════════════ */
  --z-gnb:    1100;
  --z-modal:  2000;
  --z-toast:  500;
}

/* ─── SECTION MODE: Dark (Hero / News / Footer) ───────────── */
.section--dark {
  background: var(--bg-dark);
  color: var(--fg-inverse);
}
.section--dark a { color: var(--fg-inverse); }

/* ═══════════════════════════════════════════════════════════
   SEMANTIC ELEMENT DEFAULTS
   ═══════════════════════════════════════════════════════════ */
html, body {
  font: var(--type-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--type-display-lg); letter-spacing: var(--tracking-display); margin: 0; }
h2 { font: var(--type-display);    letter-spacing: var(--tracking-display); margin: 0; }
h3 { font: var(--type-h1);         letter-spacing: var(--tracking-heading); margin: 0; }
h4 { font: var(--type-h2);         letter-spacing: var(--tracking-heading); margin: 0; }
h5 { font: var(--type-h3);         margin: 0; }
h6 { font: var(--type-h4);         margin: 0; }
p  { margin: 0; }
small { font: var(--type-body-sm); color: var(--fg-tertiary); }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }

a {
  color: var(--fg-brand);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

::selection { background: var(--red-500); color: #fff; }