/* ============================================================
   ARICO Design System — Colors & Typography
   Brand: ARICO Group (Korean/Japanese archery sports brand)
   ============================================================ */

/* ---------- Webfonts ---------- */

/* Sirenia — used ONLY for the ARICO wordmark / display moments.
   Body type uses Noto Sans (Pretendard equivalent for KR / JP). */

@font-face {
  font-family: "Sirenia";
  src: url("/fonts/Sirenia-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sirenia";
  src: url("/fonts/Sirenia-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sirenia";
  src: url("/fonts/Sirenia-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sirenia";
  src: url("/fonts/Sirenia-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sirenia";
  src: url("/fonts/Sirenia-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sirenia";
  src: url("/fonts/Sirenia-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sirenia";
  src: url("/fonts/Sirenia-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sirenia";
  src: url("/fonts/Sirenia-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sirenia";
  src: url("/fonts/Sirenia-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Body type: Noto Sans (gothic / Korean + Japanese). Loaded via Google Fonts
   in HTML pages — see README. Fallback stack covers the install case. */

:root {
  /* ============================================================
     COLOR — Atomic palette
     Primary is ARICO Green (sampled from the logo: #3d6951).
     Neutrals follow the Wanted-style cool gray ramp.
     ============================================================ */

  /* ----- ARICO Green (secondary) — 신규 디자인 시스템 그린 #1B9E54 계열로 정렬
     (이전 muted #3C6C54 → vibrant green; primary 는 블루 --tds-primary). 명도 단계 유지. ----- */
  --green-50:  #EAF6EE;
  --green-100: #DCF4E5;
  --green-200: #B3E7C7;
  --green-300: #80D7A0;
  --green-400: #4FC57D;
  --green-500: #1B9E54;   /* core brand green (디자인 시스템 secondary #1B9E54) */
  --green-600: #128A46;
  --green-700: #0F7A3D;
  --green-800: #0B5B2E;
  --green-900: #08401F;
  --green-950: #052916;

  /* ----- Target / Bow accent (arrow-tip red, used sparingly) ----- */
  --target-50:  #fdecec;
  --target-100: #fbd4d4;
  --target-300: #f17171;
  --target-500: #d8362a;   /* archery-target red */
  --target-600: #b3261c;
  --target-700: #871912;

  /* ----- Gold / Bullseye (rare; for highlights & medals) ----- */
  --gold-100: #fdf2cf;
  --gold-300: #f1c84b;
  --gold-500: #c89b1a;
  --gold-700: #8a6a0e;

  /* ----- Neutral ramp — true-gray (design kit) ----- */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;   /* page bg / paper */
  --neutral-100: #f5f5f5;
  --neutral-150: #efefef;
  --neutral-200: #eaeaea;
  --neutral-300: #d7d7d7;
  --neutral-400: #a9a9a9;
  --neutral-500: #797979;
  --neutral-600: #5b5b5b;
  --neutral-700: #494949;
  --neutral-800: #2e2e2e;
  --neutral-900: #202020;
  --neutral-950: #0f0f0f;

  /* ----- Status ----- */
  --info:    #0066ff;
  --success: #00a854;
  --warning: #f1a31a;
  --danger:  var(--target-500);

  /* ============================================================
     SEMANTIC tokens — Light theme
     ============================================================ */
  --bg:           var(--neutral-50);
  --bg-elevated:  var(--neutral-0);
  --bg-sunken:    var(--neutral-100);
  --bg-inverse:   var(--green-900);

  --surface:           var(--neutral-0);
  --surface-hover:     var(--neutral-100);
  --surface-pressed:   var(--neutral-150);
  --surface-selected:  var(--green-50);

  --fg:           var(--neutral-900);   /* primary text */
  --fg-secondary: var(--neutral-600);   /* support text */
  --fg-tertiary:  var(--neutral-500);   /* labels / meta */
  --fg-quaternary:var(--neutral-400);   /* placeholders */
  --fg-disabled:  var(--neutral-300);
  --fg-inverse:   var(--neutral-0);
  --fg-on-brand:  var(--neutral-0);

  --brand:         var(--green-500);
  --brand-hover:   var(--green-600);
  --brand-pressed: var(--green-700);
  --brand-soft:    var(--green-50);
  --brand-fg:      var(--green-700);

  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-subtle:  var(--neutral-150);
  --border-brand:   var(--green-500);
  --border-focus:   var(--green-600);

  /* ============================================================
     TYPE — fonts
     Korean + Japanese support is mandatory.
     "JP" first because Pretendard JP is the matching Wanted font;
     here we substitute Noto Sans which carries both KR + JP glyphs.
     ============================================================ */
  --font-display: "Sirenia", "Noto Serif KR", Georgia, serif;
  /* 디자인 시스템: 본문 = Noto Sans (KR/JP 글리프 포함). Inter 제거. */
  --font-sans:    "Noto Sans", "Noto Sans KR", "Noto Sans JP",
                  "Pretendard JP", "Pretendard", -apple-system,
                  BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
                  "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-mono:    "Noto Sans Mono", "JetBrains Mono", "SF Mono", ui-monospace,
                  Menlo, Consolas, monospace;

  /* ----- Type scale (rem-based, body=16px) ----- */
  --text-2xs:   11px;
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  15px;   /* body */
  --text-md:    16px;
  --text-lg:    17px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   28px;
  --text-4xl:   36px;
  --text-5xl:   48px;
  --text-6xl:   56px;
  --text-7xl:   72px;
  --text-8xl:   96px;

  /* Line-heights — tight for display, loose for body (Korean readability) */
  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-base:   1.55;
  --lh-loose:  1.75;

  /* Letter-spacing — Korean/Japanese gothic prefers slight negative tracking */
  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-arrow:  0.18em;   /* used on small caps / archery labels */

  /* Weights */
  --w-thin: 100;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 900;

  /* ============================================================
     SPACING — 4-pt base, dense up high (Wanted uses 4/8/12…)
     ============================================================ */
  --s-0:  0;
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  20px;
  --s-7:  24px;
  --s-8:  32px;
  --s-9:  40px;
  --s-10: 48px;
  --s-11: 64px;
  --s-12: 80px;
  --s-13: 96px;
  --s-14: 128px;

  /* ============================================================
     RADII — Wanted's restrained 4–12px set.
     ARICO uses fully-round pills for action chips (archery target callbacks).
     ============================================================ */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-3xl:  24px;
  --r-full: 9999px;

  /* ============================================================
     ELEVATION — soft, low-contrast. No harsh drop shadows.
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(23,23,23,0.06), 0 1px 1px rgba(23,23,23,0.04);
  --shadow-2: 0 2px 8px rgba(23,23,23,0.07), 0 1px 2px rgba(23,23,23,0.05);
  --shadow-3: 0 8px 24px rgba(23,23,23,0.08), 0 2px 6px rgba(23,23,23,0.06);
  --shadow-4: 0 18px 40px rgba(23,23,23,0.10), 0 4px 10px rgba(23,23,23,0.06);
  --shadow-focus: 0 0 0 3px rgba(27,158,84,0.28);
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.06);
  /* skeuomorphic primary-button shadow (design kit) — inset top highlight + bottom darken + 1px inner border */
  --shadow-btn: 0 1px 2px rgba(10,13,18,0.05), inset 0 -2px 0 rgba(0,0,0,0.05), inset 0 0 0 1px rgba(0,0,0,0.18);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   320ms;
  --t-slower: 480ms;

  /* Layout */
  --maxw-prose:   68ch;
  --maxw-content: 1440px;   /* 전체 콘텐츠 최대폭 (1200 → 1440 확장) */
  --maxw-wide:    1440px;
}

/* ============================================================
   Dark theme (toggle via [data-theme="dark"] on <html> or <body>)
   ============================================================ */
[data-theme="dark"] {
  /* 다크 팔레트 — 블루 기 도는 다크(시안 승인본). green→blue 그라데이션은 포인트로 유지. */
  --bg:           #0E1318;
  --bg-elevated:  #161C24;
  --bg-sunken:    #0A0E12;
  --bg-inverse:   var(--neutral-50);

  --surface:           #161C24;
  --surface-hover:     #1F2731;
  --surface-pressed:   #252E39;
  --surface-selected:  rgba(27,158,84,0.18);

  --fg:           #E8ECF1;
  --fg-secondary: #9DA7B3;
  --fg-tertiary:  #7A8593;
  --fg-quaternary: #5E6875;
  --fg-disabled:  #444E5A;
  --fg-inverse:   var(--neutral-900);

  --brand:         #34D27F;
  --brand-hover:   #4FDE91;
  --brand-pressed: #2DB463;
  --brand-soft:    rgba(27,158,84,0.16);
  --brand-fg:      #6FE0A0;

  --border:         rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);
  --border-subtle:  rgba(255,255,255,0.06);

  /* 다크 accent 가독성 — 어두운 빨강·금색을 밝은 톤으로(인라인 사용처까지 자동 적용) */
  --target-700: var(--target-300);
  --gold-700:   var(--gold-300);

  /* 그림자/페이퍼 — 다크 보정 (site.css :root 가 나중 로드라 여기 외 site.css 다크블록에서도 보정) */
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
}

/* ============================================================
   SEMANTIC TYPE classes (h1..p, code, eyebrow, etc.)
   ============================================================ */

html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-size: var(--text-base); line-height: var(--lh-base); letter-spacing: var(--tracking-snug); -webkit-font-smoothing: antialiased; }

.h-display, .h-d {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(48px, 7vw, var(--text-8xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .h2 {
  font-weight: var(--w-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-weight: var(--w-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h4, .h4 {
  font-weight: var(--w-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-weight: var(--w-semibold);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  margin: 0;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-arrow);
  text-transform: uppercase;
  color: var(--brand);
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-secondary);
  margin: 0 0 var(--s-5) 0;
}

.lead {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  font-weight: var(--w-regular);
}

.caption, small {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
}