/* =========================================================
   유가지도 — Design Tokens
   Trust-forward data + readability-first minimal
   ========================================================= */

@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  /* ---- Neutrals / surface ---- */
  --bg:        #FAFAF8;   /* warm off-white page */
  --surface:   #FFFFFF;   /* cards, widgets */
  --surface-2: #F4F3EF;   /* sunken / secondary fill */
  --border:    #E6E4DF;   /* hairlines */
  --border-2:  #D8D5CD;   /* stronger dividers */
  --ink:       #1A1D1F;   /* body text */
  --ink-2:     #5B6166;   /* secondary text */
  --ink-3:     #8A9097;   /* tertiary / captions */

  /* ---- Brand ---- */
  --primary:      #0E5A63;  /* deep petrol teal — trust */
  --primary-700:  #0A464D;
  --primary-600:  #0E5A63;
  --primary-500:  #14747F;
  --primary-tint: #E4EEEF;  /* teal wash */
  --primary-tint-2:#D2E3E5;

  --accent:       #E08A00;  /* oil amber — energy / CTA */
  --accent-700:   #B86F00;
  --accent-600:   #E08A00;
  --accent-500:   #F59E1B;
  --accent-tint:  #FBEFD9;  /* amber wash */

  /* ---- Price semantic (KR convention) ---- */
  --up:    #E5484D;  /* 상승 — red  ▲ + */
  --down:  #2F6FED;  /* 하락 — blue ▼ − */
  --flat:  #5B6166;  /* 변동없음 — gray */
  --up-tint:   #FCEBEC;
  --down-tint: #E8EFFE;

  /* ---- Status ---- */
  --success: #2E9E5B;
  --warn:    #E0A800;
  --error:   #D64545;
  --success-tint: #E5F4EB;
  --warn-tint:    #FBF1D2;
  --error-tint:   #FBE9E9;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(26,29,31,.05), 0 1px 1px rgba(26,29,31,.04);
  --shadow-md: 0 2px 6px rgba(26,29,31,.06), 0 6px 16px rgba(26,29,31,.05);
  --shadow-lg: 0 8px 28px rgba(26,29,31,.10);
  --ring: 0 0 0 3px rgba(14,90,99,.16);

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Type ---- */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fs-display: 28px;
  --fs-h1: 24px;
  --fs-h2: 20px;
  --fs-h3: 17px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-caption: 13px;
  --lh-tight: 1.25;
  --lh-body: 1.7;

  /* ---- Spacing density (driven by Tweaks) ---- */
  --density: 1;
  --space-card: calc(20px * var(--density));
  --space-section: calc(56px * var(--density));

  /* ---- Tweakable accent balance ---- */
  --accent-weight: 1; /* 0 = quiet amber, 1 = balanced, higher = energetic */
}

/* Desktop steps up the display/headline scale a touch */
@media (min-width: 720px) {
  :root {
    --fs-display: 40px;
    --fs-h1: 30px;
    --fs-h2: 23px;
    --fs-h3: 18px;
  }
}

/* ---- Dark surface (Tweaks: theme) ---- */
:root[data-theme="dark"] {
  --bg:        #15181A;
  --surface:   #1E2225;
  --surface-2: #262B2E;
  --border:    #2E3438;
  --border-2:  #3A4145;
  --ink:       #ECEEEF;
  --ink-2:     #A6ADB2;
  --ink-3:     #767D82;
  --primary:      #2BA6B2;
  --primary-tint: #123A3E;
  --primary-tint-2:#16484D;
  --accent:       #F59E1B;
  --accent-tint:  #3A2C10;
  --up-tint:   #3A1E20;
  --down-tint: #16243F;
  --primary-700:  #2BA6B2;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.5);
}

/* Tabular figures — price alignment */
.num, .price, table td, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}