/* ============================================================
   Luxor Digital — Core Tokens
   colors, typography, spacing, radii, shadows, motion
   ------------------------------------------------------------
   Source: unocha_style_web/style.css + brand reference assets
   ============================================================ */

/* Noto Sans JP —— フォントは Google Fonts から読み込む（index.html の <link>）。
   日本サイトでは繁体字用の Noto Sans TC は使わない。TC フォントでは「対」「検」「図」
   などが台湾の字形になったりフォールバックして字面が揃わないため、JP 版を使う。
   自前ホストの .ttf（9.2MB 一括読み込み）から woff2 + unicode-range 分割に変更。
   書体そのものは同一。 */

:root {
  /* ---------- Colors: canvas & surfaces ---------- */
  --lx-canvas:        #F2F2F2;   /* light-gray body background */
  --lx-surface:       #FFFFFF;   /* card / section fills */
  --lx-surface-alt:   #FAFAFA;   /* subtle alternating surface */

  /* ---------- Colors: ink (text) ---------- */
  --lx-ink-1:         #1A1A1A;   /* strongest headings */
  --lx-ink-2:         #333333;   /* default heading */
  --lx-ink-3:         #666666;   /* body */
  --lx-ink-4:         #999999;   /* quiet meta / placeholder */
  --lx-ink-invert:    #FFFFFF;   /* text on photography / gold */

  /* ---------- Colors: brand ---------- */
  --lx-gold:          #D1A055;   /* primary accent (site CTA, borders) */
  --lx-gold-hover:    #B88A45;   /* hover state of gold */
  --lx-gold-soft:     #E8CC94;   /* tinted, for backgrounds/chips */
  --lx-yellow:        #F2B233;   /* pyramid yellow in logo */
  --lx-ink-logo:      #111111;   /* black of the wordmark */

  /* ---------- Colors: dividers & hairlines ---------- */
  --lx-border:        #EEEEEE;   /* 1–2px dividers under titles */
  --lx-border-soft:   rgba(0,0,0,0.05); /* nav hairline */
  --lx-border-strong: #DDDDDD;

  /* ---------- Colors: semantic (UI states) ---------- */
  --lx-success:       #3E8E5A;
  --lx-warning:       #D69B2E;
  --lx-danger:        #B94A48;
  --lx-info:          #3E6E9E;

  /* ---------- Scrim over photography ---------- */
  --lx-scrim-top:     rgba(0,0,0,0.40);
  --lx-scrim-bot:     rgba(0,0,0,0.20);
  --lx-scrim:         linear-gradient(var(--lx-scrim-top), var(--lx-scrim-bot));

  /* ============================================================
     Typography
     ============================================================ */
  --lx-font-sans: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
                  'Yu Gothic', 'Meiryo', 'Helvetica Neue', Arial, sans-serif;
  --lx-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --lx-weight-light:    300;
  --lx-weight-regular:  400;
  --lx-weight-medium:   500;
  --lx-weight-bold:     700;
  --lx-weight-black:    900;

  /* Sizes (fluid for hero, static for rest) */
  --lx-size-hero:   clamp(3rem, 10vw, 7rem);   /* hero h1 */
  --lx-size-h1:     2.5rem;   /* 40px  section titles / subtitle */
  --lx-size-h2:     2.2rem;   /* 35px */
  --lx-size-h3:     1.6rem;   /* 26px  card titles */
  --lx-size-h4:     1.2rem;   /* 19px */
  --lx-size-body-lg: 1.1rem;  /* 18px  hero descriptions */
  --lx-size-body:   1rem;     /* 16px */
  --lx-size-small:  0.875rem; /* 14px  nav / meta */
  --lx-size-xs:     0.75rem;  /* 12px  eyebrow */

  /* Tracking — a signature of the Luxor aesthetic (very spacious) */
  --lx-track-hero:   12px;
  --lx-track-title:  6px;
  --lx-track-body:   2px;
  --lx-track-normal: 0;

  /* Leading */
  --lx-leading-tight:  1.2;
  --lx-leading-snug:   1.4;
  --lx-leading-normal: 1.6;
  --lx-leading-loose:  1.8;

  /* ============================================================
     Spacing — 8-pt scale
     ============================================================ */
  --lx-space-0:   0;
  --lx-space-1:   4px;
  --lx-space-2:   8px;
  --lx-space-3:   12px;
  --lx-space-4:   16px;
  --lx-space-5:   20px;
  --lx-space-6:   24px;
  --lx-space-8:   32px;
  --lx-space-10:  40px;
  --lx-space-12:  48px;
  --lx-space-16:  64px;
  --lx-space-20:  80px;  /* section vertical */
  --lx-space-24:  96px;
  --lx-space-32:  128px;

  --lx-gutter:        7%;     /* section horizontal padding */
  --lx-container-max: 1400px;

  /* ============================================================
     Radii
     ============================================================ */
  --lx-radius-sm:   4px;
  --lx-radius-md:   8px;
  --lx-radius-lg:   12px;   /* cards & images (signature) */
  --lx-radius-xl:   20px;
  --lx-radius-pill: 9999px; /* CTA pill button */

  /* ============================================================
     Shadows
     ============================================================ */
  --lx-shadow-0:  none;
  --lx-shadow-1:  0 1px 2px rgba(0,0,0,0.04);
  --lx-shadow-2:  0 2px 8px rgba(0,0,0,0.06);
  --lx-shadow-3:  0 4px 15px rgba(0,0,0,0.12);
  --lx-shadow-float: 0 4px 15px rgba(0,0,0,0.30); /* floating CTA */
  --lx-shadow-lift:  0 10px 30px rgba(0,0,0,0.10);

  /* ============================================================
     Motion
     ============================================================ */
  --lx-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --lx-ease-emphasis: cubic-bezier(0.77, 0, 0.175, 1);
  --lx-dur-fast:   150ms;
  --lx-dur-base:   300ms;
  --lx-dur-slow:   600ms;
  --lx-dur-slide: 1500ms;   /* hero crossfade */

  /* ============================================================
     Layout
     ============================================================ */
  --lx-nav-height: 104px;
  --lx-z-nav: 9200;   /* 高於 overlay，導覽列在產品詳情頁也要看得到 */
  --lx-z-overlay: 9000;
  --lx-z-toast: 9500;
}

/* ============================================================
   Base element styling (semantic shortcuts)
   Apply by wrapping content in .lx or attaching to <body>
   ============================================================ */
.lx, body.lx {
  font-family: var(--lx-font-sans);
  font-size: var(--lx-size-body);
  color: var(--lx-ink-3);
  background: var(--lx-canvas);
  line-height: var(--lx-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lx h1, .lx .lx-h1 {
  font-size: var(--lx-size-h1);
  font-weight: var(--lx-weight-medium);
  color: var(--lx-ink-2);
  letter-spacing: var(--lx-track-title);
  line-height: var(--lx-leading-tight);
}

.lx h2, .lx .lx-h2 {
  font-size: var(--lx-size-h2);
  font-weight: var(--lx-weight-medium);
  color: var(--lx-ink-2);
  letter-spacing: var(--lx-track-body);
  line-height: var(--lx-leading-snug);
}

.lx h3, .lx .lx-h3 {
  font-size: var(--lx-size-h3);
  font-weight: var(--lx-weight-medium);
  color: var(--lx-ink-2);
  line-height: var(--lx-leading-snug);
}

.lx h4, .lx .lx-h4 {
  font-size: var(--lx-size-h4);
  font-weight: var(--lx-weight-medium);
  color: var(--lx-ink-2);
}

.lx p, .lx .lx-body {
  font-size: var(--lx-size-body);
  color: var(--lx-ink-3);
  line-height: var(--lx-leading-loose);
  letter-spacing: var(--lx-track-body);
}

.lx .lx-hero-h1 {
  font-size: var(--lx-size-hero);
  font-weight: var(--lx-weight-bold);
  letter-spacing: var(--lx-track-hero);
  color: var(--lx-ink-invert);
  line-height: var(--lx-leading-tight);
}

.lx .lx-hero-subtitle {
  font-size: var(--lx-size-h1);
  font-weight: var(--lx-weight-regular);
  letter-spacing: var(--lx-track-title);
  color: var(--lx-ink-invert);
  opacity: 0.95;
}

.lx .lx-eyebrow {
  font-size: var(--lx-size-xs);
  font-weight: var(--lx-weight-bold);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lx-ink-4);
}

.lx .lx-meta {
  font-size: var(--lx-size-small);
  color: var(--lx-ink-4);
  letter-spacing: 0.5px;
}

/* Accent left-border callout (from hero description) */
.lx .lx-callout {
  border-left: 2px solid var(--lx-gold);
  padding-left: var(--lx-space-5);
}

/* Title with 2px divider underline, inline-block so hugs text */
.lx .lx-title-underline {
  border-bottom: 2px solid var(--lx-border);
  padding-bottom: 10px;
  display: inline-block;
}