/* =============================================================
   OneThera — Design Tokens (CSS Custom Properties)
   Source of truth for all colors, typography, spacing, radius
   ============================================================= */

:root {

  /* ── COLORS: Brand & Accent ─────────────────────────────── */
  --color-primary:        #111111;   /* Apothecary Charcoal */
  --color-primary-muted:  #2a2a2a;   /* Muted Charcoal */
  --color-accent:         #dc2626;   /* Absolute Crimson — sacred clinical indicator ONLY */
  --color-on-primary:     #ffffff;   /* Text on primary surfaces */

  /* ── COLORS: Surface ─────────────────────────────────────── */
  --color-canvas:         #fbfbfa;   /* Sophisticated Off-White */
  --color-surface-bone:   #fbfbfa;   /* Sophisticated Off-White */
  --color-surface-card:   #ffffff;   /* Clinical White — cards, dropdowns */
  --color-surface-dark:   #1a1c1e;   /* Apothecary Dark — footer, dark sections */
  --color-hairline:       rgba(17,17,17,0.08); /* Structural Hairline — 1px separator */
  --color-hairline-strong:#111111;   /* Validation Outline — active states */

  /* ── COLORS: Text ────────────────────────────────────────── */
  --color-text-ink:       #111111;   /* Ink Black — primary display type */
  --color-text-body:      #3c3f42;   /* Apothecary Gray — long-form body copy */
  --color-text-mute:      #6b7280;   /* Slate Mute — subtitles, footnotes */
  --color-text-placeholder:#9ca3af; /* Oxide Silver — form placeholders */
  --color-text-on-dark:   #f9f9f9;   /* On-Dark Canvas — text on dark sections */

  /* ── COLORS: Semantic ────────────────────────────────────── */
  --color-semantic-success: #15803d; /* Verification Green — B2B compliance checkmarks */
  --color-link:           #111111;   /* Link Line — underline transitions to accent on hover */
  --color-gold:           #c5a572;   /* Gold Accent — premium brand highlight */
  --color-gold-subtle:    rgba(197, 165, 114, 0.12); /* Gold Tint — badges, dividers */
  --color-gold-border:    rgba(197, 165, 114, 0.45); /* Gold Border — 투명도 인상하여 경계성 강화 */
  --color-soft-pink-bg:     #fdf5f6;   /* Muted Blush Off-White */
  --color-soft-pink-accent: #f0c3cb;   /* Refined Rose Tint */
  --color-soft-pink-border: rgba(240, 195, 203, 0.3); /* Soft Pink Border */

  /* ── SPACING ─────────────────────────────────────────────── */
  --spacing-xs:           4px;
  --spacing-sm:           8px;
  --spacing-md:           12px;
  --spacing-lg:           16px;
  --spacing-xl:           24px;
  --spacing-xxl:          32px;
  --spacing-xxxl:         48px;
  --spacing-block:        64px;
  --spacing-section:      96px;
  --spacing-editorial:    128px;

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --rounded-none:         0px;
  --rounded-xs:           0px;
  --rounded-sm:           0px;
  --rounded-md:           0px;
  --rounded-lg:           0px;
  --rounded-full:         9999px;
  --rounded-gat:       0px;

  /* ── GAT SHAPE CONTROLS ───────────────────────────────── */
  --gat-clip-path:     polygon(0 0, 100% 0, 100% calc(100% - 32px), 0 100%); /* 슬로핑 차양 각도 */
  --gat-clip-path-inv: polygon(0 32px, 100% 0, 100% 100%, 0 100%); /* 반대 슬로핑 차양 */

  /* ── FONT FAMILIES ───────────────────────────────────────── */
  --font-display:         'Inter', 'Noto Sans KR', 'Helvetica', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:            'Inter', 'Noto Sans KR', 'Helvetica', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:           'Inter', 'Noto Sans KR', 'Helvetica', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:            'Inter', 'Noto Sans KR', 'Helvetica', 'Courier New', monospace; /* Inter Mono fallback */

  /* ── TYPOGRAPHY TOKENS ───────────────────────────────────── */

  /* display-xxl: Hero statement. MAX ONE USE PER PAGE. */
  --type-display-xxl-size:    clamp(2.25rem, 5vw + 1rem, 6rem);  /* 96px max */
  --type-display-xxl-weight:  700;
  --type-display-xxl-lh:      1.625;
  --type-display-xxl-ls:      0.06em; /* 넓은 자간 */

  /* display-xl: Section introduction headers */
  --type-display-xl-size:     clamp(2rem, 3.5vw + 0.8rem, 4rem); /* 64px max */
  --type-display-xl-weight:   600;
  --type-display-xl-lh:       1.625;
  --type-display-xl-ls:       0.05em;

  /* display-lg: Product titles, code launch rows */
  --type-display-lg-size:     clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem); /* 40px max */
  --type-display-lg-weight:   600;
  --type-display-lg-lh:       1.625;
  --type-display-lg-ls:       0.04em;

  /* heading-lg: Product model names, buyer hooks */
  --type-heading-lg-size:     clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); /* 28px max */
  --type-heading-lg-weight:   600;
  --type-heading-lg-lh:       1.625;
  --type-heading-lg-ls:       0.03em;

  /* heading-md: Card headers, form section labels */
  --type-heading-md-size:     clamp(1rem, 1vw + 0.5rem, 1.25rem); /* 20px max */
  --type-heading-md-weight:   600;
  --type-heading-md-lh:       1.625;
  --type-heading-md-ls:       0.02em;

  /* heading-sm: Spec headers, list identifiers */
  --type-heading-sm-size:     1rem;    /* 16px — fixed */
  --type-heading-sm-weight:   600;
  --type-heading-sm-lh:       1.625;
  --type-heading-sm-ls:       0.02em;

  /* subtitle-editorial: Cormorant italic subheadings */
  --type-subtitle-size:       clamp(1.125rem, 1.2vw + 0.5rem, 1.375rem); /* 22px max */
  --type-subtitle-weight:     400;
  --type-subtitle-lh:         1.625;
  --type-subtitle-ls:         0.03em;

  /* body-lead: Hero intro paragraphs */
  --type-body-lead-size:      1.125rem; /* 18px */
  --type-body-lead-weight:    400;
  --type-body-lead-lh:        1.625;
  --type-body-lead-ls:        0.03em;

  /* body-md: Standard consumer prose */
  --type-body-md-size:        0.9375rem; /* 15px */
  --type-body-md-weight:      400;
  --type-body-md-lh:          1.65;
  --type-body-md-ls:          0.02em;

  /* body-sm: Footnotes, meta, regulatory */
  --type-body-sm-size:        0.8125rem; /* 13px */
  --type-body-sm-weight:      400;
  --type-body-sm-lh:          1.625;
  --type-body-sm-ls:          0.02em;

  /* code-lg: Monospaced product code identifiers */
  --type-code-lg-size:        1.125rem; /* 18px */
  --type-code-lg-weight:      500;
  --type-code-lg-lh:          1.625;
  --type-code-lg-ls:          0.03em;

  /* code-md: Tabular clinical numbers, percentages */
  --type-code-md-size:        0.875rem; /* 14px */
  --type-code-md-weight:      400;
  --type-code-md-lh:          1.625;
  --type-code-md-ls:          0.02em;

  /* control-md: Button labels, filter selectors */
  --type-control-md-size:     0.9375rem; /* 15px */
  --type-control-md-weight:   600;
  --type-control-md-lh:       1.625;
  --type-control-md-ls:       0.03em;

  /* control-sm: Secondary pills, sub-nav */
  --type-control-sm-size:     0.8125rem; /* 13px */
  --type-control-sm-weight:   600;
  --type-control-sm-lh:       1.625;
  --type-control-sm-ls:       0.03em;

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --transition-fast:      0.2s ease;
  --transition-med:       0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:      0.6s ease-out;
  --transition-page:      0.5s cubic-bezier(0.22, 1, 0.36, 1);

  /* ── ELEVATION ───────────────────────────────────────────── */
  /* Only ONE permitted shadow — newsletter modal */
  --shadow-modal:         0 4px 20px rgba(17, 17, 17, 0.04);
  --shadow-card-hover:    0 8px 32px rgba(17, 17, 17, 0.08);

  /* ── HERO OVERLAY ──────────────────────────────────────── */
  --hero-overlay:         linear-gradient(135deg, rgba(17,17,17,0.30) 0%, rgba(17,17,17,0.10) 50%, rgba(17,17,17,0.02) 100%);
  --hero-overlay-bottom:  linear-gradient(to top, rgba(17,17,17,0.25) 0%, transparent 50%);
}