/* ==========================================================================
   9O VAN Design Tokens
   Source: Figma UI KIT (九歐汽車 Client)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     COLOR — Base Palette
     ------------------------------------------------------------------ */
  --color-gray-01: #EEEEEE;
  --color-gray-02: #B1B1B1;

  --color-white-01: #FFFFFF;
  --color-white-02: rgba(255, 255, 255, 0.7);
  --color-white-03: rgba(255, 255, 255, 0.5);
  --color-white-04: rgba(255, 255, 255, 0.3);
  --color-white-05: rgba(255, 255, 255, 0.2);
  --color-white-06: rgba(255, 255, 255, 0.1);

  --color-black-01: #303030;

  --color-yellow-01: #FFCA40;

  --color-bg-01: #232933;
  --color-bg-02: #020202;

  --color-body: #212529;

  --color-gray-03: #F5F5F5;
  --color-divider: rgba(123, 123, 123, 0.4);

  /* ------------------------------------------------------------------
     COLOR — Semantic Mappings
     ------------------------------------------------------------------ */
  --color-font-primary: var(--color-white-01);
  --color-font-secondary: var(--color-gray-01);
  --color-font-dark: var(--color-black-01);
  --color-font-body: var(--color-body);
  --color-font-accent: var(--color-yellow-01);

  --color-surface-dark: var(--color-bg-01);
  --color-surface-deep: var(--color-bg-02);
  --color-surface-white: var(--color-white-01);
  --color-surface-muted: #717171;

  --color-state-hover-overlay: rgba(255, 202, 64, 0.6);
  --color-state-disabled-opacity: 0.4;

  --color-line-green: #0EA800;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Font Families
     ------------------------------------------------------------------ */
  --font-heading: 'Noto Serif SC', serif;
  --font-body: 'Noto Sans TC', sans-serif;
  --font-en: 'Marcellus SC', serif;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Chinese Heading (Noto Serif SC)
     ------------------------------------------------------------------ */

  /* 標題文字 1 */
  --heading-1-size: 66px;
  --heading-1-weight: 500;
  --heading-1-lh: 1.5;
  --heading-1-ls: -0.011em;

  /* 標題文字 2 */
  --heading-2-size: 40px;
  --heading-2-weight: 700;
  --heading-2-lh: 1;
  --heading-2-ls: 0;

  /* 標題文字 3 */
  --heading-3-size: 36px;
  --heading-3-weight: 700;
  --heading-3-lh: normal;
  --heading-3-ls: 0;

  /* 標題文字 4 */
  --heading-4-size: 32px;
  --heading-4-weight: 700;
  --heading-4-lh: normal;
  --heading-4-ls: 0;

  /* 標題文字 5 */
  --heading-5-size: 28px;
  --heading-5-weight: 700;
  --heading-5-lh: 1.5;
  --heading-5-ls: 0.06em;

  /* 標題文字 6 */
  --heading-6-size: 24px;
  --heading-6-weight: 700;
  --heading-6-lh: normal;
  --heading-6-ls: 0;

  /* 標題文字 7 */
  --heading-7-size: 20px;
  --heading-7-weight: 700;
  --heading-7-lh: normal;
  --heading-7-ls: 0.06em;

  /* 標題文字 8 */
  --heading-8-size: 16px;
  --heading-8-weight: 700;
  --heading-8-lh: normal;
  --heading-8-ls: 0.01em;

  /* 標題文字 9 */
  --heading-9-size: 12px;
  --heading-9-weight: 700;
  --heading-9-lh: normal;
  --heading-9-ls: 0.01em;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Chinese Body (Noto Serif SC)
     Figma naming: 內文文字 3 = Body/20, 內文文字 1, 內文文字 2 = Body/16
     Token numbering kept for backward compat; comments show Figma name.
     ------------------------------------------------------------------ */

  /* Figma: 內文文字 3 (Body/20) — 20px Regular 150% -1.1% */
  --body-1-size: 20px;
  --body-1-weight: 400;
  --body-1-lh: 1.5;
  --body-1-ls: -0.011em;

  /* Figma: 內文文字 1 — 16px Regular Auto 1% */
  --body-2-size: 16px;
  --body-2-weight: 400;
  --body-2-lh: normal;
  --body-2-ls: 0.01em;

  /* Figma: 內文文字 2 (Body/16) — 16px Regular 230% 6% */
  --body-3-size: 16px;
  --body-3-weight: 400;
  --body-3-lh: 2.3;
  --body-3-ls: 0.06em;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — English/Numbers (Marcellus SC)
     ------------------------------------------------------------------ */

  --en-heading-1-size: 40px;
  --en-heading-1-weight: 400;
  --en-heading-1-lh: normal;
  --en-heading-1-ls: 0;

  --en-heading-2-size: 24px;
  --en-heading-2-weight: 400;
  --en-heading-2-lh: 1.5;
  --en-heading-2-ls: -0.011em;

  /* Logo (Marcellus SC) */
  --logo-desktop-size: 26px;
  --logo-desktop-lh: 1.254;
  --logo-mobile-size: 16px;
  --logo-mobile-lh: 1.254;

  /* Navigation text (Noto Sans TC) */
  --nav-item-size: 16px;
  --nav-item-weight: 400;
  --nav-item-lh: 1.2;

  /* Footer section title (Noto Sans TC) */
  --footer-title-size: 16px;
  --footer-title-weight: 700;
  --footer-title-lh: 1.2;

  /* Footer body (Noto Sans TC Light) */
  --footer-body-size: 16px;
  --footer-body-weight: 300;
  --footer-body-lh: 1.625;

  /* Footer contact (Noto Sans TC) */
  --footer-contact-size: 18px;
  --footer-contact-weight: 400;
  --footer-contact-lh: 1.21;

  /* Footer small (Noto Sans TC — mobile/legal) */
  --footer-small-size: 12px;
  --footer-small-weight: 400;
  --footer-small-lh: 1.6;
  --footer-small-ls: 0.02em;

  /* ------------------------------------------------------------------
     SPACING
     ------------------------------------------------------------------ */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;
  --space-120: 120px;

  /* ------------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 50px;
  --radius-round: 100px;

  /* ------------------------------------------------------------------
     SHADOW
     ------------------------------------------------------------------ */
  --shadow-btn-default: 10px 10px 40px 0px rgba(255, 255, 255, 0.2);
  --shadow-btn-soft: 10px 10px 40px 0px rgba(255, 255, 255, 0.1);
  --shadow-card: 0px 14px 34px 0px rgba(0, 0, 0, 0.45);
  --shadow-calc: 0px 31px 54px 40px rgba(22, 29, 40, 0.5);

  /* ------------------------------------------------------------------
     BREAKPOINTS (for reference — use in media queries)
     sm:  375px   — mobile
     md:  768px   — tablet
     lg:  1024px  — small desktop
     xl:  1440px  — desktop (design baseline)
     ------------------------------------------------------------------ */

  /* ------------------------------------------------------------------
     TRANSITION
     ------------------------------------------------------------------ */
  --transition-default: all 200ms ease;
  --transition-underline: width 300ms ease;

  /* ------------------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------------------ */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;

  /* ------------------------------------------------------------------
     BUTTON — Primary (Main BTN)
     ------------------------------------------------------------------ */
  --btn-primary-bg: var(--color-white-01);
  --btn-primary-color: var(--color-black-01);
  --btn-primary-font: var(--font-heading);
  --btn-primary-weight: 700;
  --btn-primary-radius: var(--radius-pill);

  --btn-primary-lg-px: var(--space-40);
  --btn-primary-lg-py: var(--space-24);
  --btn-primary-lg-size: 24px;
  --btn-primary-lg-min-w: 176px;
  --btn-primary-lg-shadow: var(--shadow-btn-default);

  --btn-primary-sm-px: var(--space-28);
  --btn-primary-sm-py: var(--space-20);
  --btn-primary-sm-size: 20px;
  --btn-primary-sm-min-w: 140px;
  --btn-primary-sm-shadow: var(--shadow-btn-soft);

  /* ------------------------------------------------------------------
     BUTTON — Secondary (Btn)
     ------------------------------------------------------------------ */
  --btn-secondary-bg: var(--color-white-01);
  --btn-secondary-color: var(--color-black-01);
  --btn-secondary-font: var(--font-heading);
  --btn-secondary-weight: 700;
  --btn-secondary-radius: var(--radius-pill);

  --btn-secondary-lg-px: var(--space-28);
  --btn-secondary-lg-py: var(--space-12);
  --btn-secondary-lg-size: 16px;
  --btn-secondary-lg-min-w: 123px;

  --btn-secondary-sm-px: var(--space-20);
  --btn-secondary-sm-py: var(--space-12);
  --btn-secondary-sm-size: 12px;
  --btn-secondary-sm-min-w: 91px;

  /* ------------------------------------------------------------------
     TAB
     ------------------------------------------------------------------ */
  --tab-container-bg: var(--color-white-06);
  --tab-container-border: 1px solid var(--color-white-01);
  --tab-container-radius: var(--radius-lg);
  --tab-item-active-bg: var(--color-bg-01);
  --tab-item-active-color: var(--color-white-01);
  --tab-item-active-radius: var(--radius-md);
  --tab-item-px: var(--space-40);
  --tab-item-py: var(--space-16);
  --tab-item-size: 16px;
  --tab-item-weight: 700;
  --tab-item-ls: 0.01em;

  /* ------------------------------------------------------------------
     ARROW BUTTON
     ------------------------------------------------------------------ */
  --arrow-btn-size: 48px;
  --arrow-btn-icon-size: 24px;
  --arrow-btn-radius: var(--radius-round);
  --arrow-btn-border: 1px solid var(--color-white-01);

  /* ------------------------------------------------------------------
     CARD
     ------------------------------------------------------------------ */
  --card-border-accent: 1px solid rgba(255, 202, 64, 0.6);
  --card-shadow: var(--shadow-card);
  --card-bg-dark: #383838;
  --card-radius: var(--radius-md);

  /* ------------------------------------------------------------------
     BADGE
     ------------------------------------------------------------------ */
  --badge-bg: rgba(255, 255, 255, 0.25);
  --badge-radius: var(--radius-round);

  /* ------------------------------------------------------------------
     BUTTON — Outline (header Line預約, etc.)
     ------------------------------------------------------------------ */
  --btn-outline-bg: transparent;
  --btn-outline-border: 1px solid currentColor;

  --btn-outline-lg-px: var(--space-28);
  --btn-outline-lg-py: var(--space-12);
  --btn-outline-lg-size: 16px;
  --btn-outline-lg-min-w: 123px;

  --btn-outline-sm-px: var(--space-20);
  --btn-outline-sm-py: var(--space-12);
  --btn-outline-sm-size: 12px;
  --btn-outline-sm-min-w: 91px;

  /* ------------------------------------------------------------------
     CALCULATOR CARD (services page)
     ------------------------------------------------------------------ */
  --calc-card-bg: rgba(32, 36, 44, 0.7);
  --calc-card-border: 1px solid var(--color-white-01);
  --calc-card-radius: var(--radius-lg);
  --calc-card-shadow: var(--shadow-calc);
  --calc-card-blur: blur(7px);

  /* ------------------------------------------------------------------
     FAQ ACCORDION
     ------------------------------------------------------------------ */
  --faq-q-color: rgba(255, 202, 64, 0.6);
  --faq-divider: 1px solid var(--color-white-06);
  --faq-open-color: var(--color-accent);

  /* ------------------------------------------------------------------
     FEATURE CARD (services page)
     ------------------------------------------------------------------ */
  --feature-card-bg: rgba(255, 255, 255, 0.1);
  --feature-card-radius: var(--radius-lg);
  --feature-card-border: 1px solid var(--color-white-06);

  /* ------------------------------------------------------------------
     STEP CIRCLE (services page)
     ------------------------------------------------------------------ */
  --step-circle-size: 100px;
  --step-circle-border: 1px solid var(--color-white-01);
  --step-circle-radius: var(--radius-round);

  /* ------------------------------------------------------------------
     HEADER
     ------------------------------------------------------------------ */
  --header-desktop-h: 80px;
  --header-mobile-h: 56px;
  --header-blur: blur(34px);
  --header-border-bottom: 1px solid var(--color-white-01);
  --header-nav-gap: 32px;
  --header-cta-gap: 16px;

  /* Mobile CTA button override */
  --btn-mobile-cta-py: 8px;
  --btn-mobile-cta-px: var(--space-28);

  /* ------------------------------------------------------------------
     FOOTER
     ------------------------------------------------------------------ */
  --footer-desktop-h: 485px;
  --footer-mobile-h: 596px;
  --footer-bg: var(--color-white-01);
  --footer-text-color: var(--color-bg-02);
  --footer-sidebar-bg: var(--color-gray-03);
  --footer-divider: 1px solid var(--color-divider);
  --footer-link-gap: 32px;
  --footer-contact-icon-size: 16px;
  --footer-contact-gap: 16px;
  --footer-social-gap: 24px;
}