/* ============================================================
   tinypoker.net · FOUNDATION TOKENS
   ─────────────────────────────────────────────────────────────
   通用層 · 整站可用 · 主站 UI 改版會直接 lift 這個檔案
   作者：TTT Design / Phase 1 · 2026-05-17
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     1. COLOR · 顏色骨幹
     -------------------------------------------------------- */

  /* Stone — 深色面 / 背景 / surface (warm-toned charcoal) */
  --c-stone-50:   #F7F4EE;
  --c-stone-100:  #E8E2D2;
  --c-stone-200:  #C9C2B0;
  --c-stone-300:  #8C8775;
  --c-stone-400:  #544C3F;
  --c-stone-500:  #3D372E;
  --c-stone-600:  #2A2620;
  --c-stone-700:  #221F19;
  --c-stone-800:  #1A1814;
  --c-stone-900:  #0F0E0B;
  --c-stone-950:  #08070A;

  /* Gold — 主色 (aged bronze, not LED gold) */
  --c-gold-300:   #EFD391;
  --c-gold-400:   #D9B777;
  --c-gold-500:   #C9A35F;   /* base */
  --c-gold-600:   #A8843E;
  --c-gold-700:   #7E6228;
  --c-gold-800:   #5E4818;
  --c-gold-900:   #3E3010;

  /* Ember — 火光 accent · 警示 / CTA emphasis / live */
  --c-ember-300:  #F4A56B;
  --c-ember-500:  #E07A3C;
  --c-ember-700:  #B45921;

  /* Ivory — 文字 on dark */
  --c-ivory-100:  #F5EFE0;
  --c-ivory-200:  #E2DBC8;
  --c-ivory-300:  #C9C2B0;
  --c-ivory-500:  #8C8775;

  /* Functional — semantic */
  --c-line-dim:     rgba(201, 163, 95, 0.18);
  --c-line:         rgba(201, 163, 95, 0.32);
  --c-line-strong:  rgba(201, 163, 95, 0.60);
  --c-success:      #7DC97E;
  --c-warning:      #E0B85C;
  --c-danger:       #D55C5C;
  --c-info:         #4FB3C9;

  /* Surface tokens — semantic aliases for app-level usage */
  --c-bg:           var(--c-stone-900);
  --c-bg-elev-1:    var(--c-stone-800);
  --c-bg-elev-2:    var(--c-stone-700);
  --c-bg-elev-3:    var(--c-stone-600);
  --c-text:         var(--c-ivory-100);
  --c-text-muted:   var(--c-ivory-300);
  --c-text-dim:     var(--c-ivory-500);
  --c-text-accent:  var(--c-gold-400);

  /* ----------------------------------------------------------
     2. TYPOGRAPHY · 字體系統
     -------------------------------------------------------- */

  --font-display:   'Cinzel', 'Noto Serif TC', serif;
  --font-serif:     'Noto Serif TC', 'Cinzel', serif;
  --font-sans:      'Inter', 'Noto Sans TC', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Scale (fluid · mobile-first via clamp) */
  --t-hero:    clamp(2.5rem, 8vw, 6rem);     /* GTD 大字 */
  --t-h1:      clamp(2rem, 5vw, 3.5rem);
  --t-h2:      clamp(1.5rem, 3.5vw, 2.25rem);
  --t-h3:      clamp(1.25rem, 2.5vw, 1.5rem);
  --t-h4:      clamp(1rem, 2vw, 1.125rem);
  --t-body:    clamp(0.9375rem, 1.4vw, 1.0625rem);
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* Line height */
  --lh-tight:   1.05;
  --lh-snug:    1.3;
  --lh-base:    1.55;
  --lh-loose:   1.85;

  /* Letter-spacing */
  --ls-display: 0.06em;
  --ls-eyebrow: 0.32em;
  --ls-mono:    0.16em;
  --ls-tight:   0.01em;

  /* Font weight */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ----------------------------------------------------------
     3. SPACING · 8pt grid
     -------------------------------------------------------- */

  --sp-0:     0;
  --sp-1:     4px;
  --sp-2:     8px;
  --sp-3:     12px;
  --sp-4:     16px;
  --sp-5:     24px;
  --sp-6:     32px;
  --sp-7:     48px;
  --sp-8:     64px;
  --sp-9:     96px;
  --sp-10:    128px;

  /* ----------------------------------------------------------
     4. RADIUS · 圓角
     -------------------------------------------------------- */

  --r-none:   0;
  --r-xs:     2px;        /* 卡片 default — 沿著「石材雕刻」感 */
  --r-sm:     6px;        /* button */
  --r-md:     12px;       /* big card / modal */
  --r-lg:     16px;
  --r-pill:   9999px;

  /* ----------------------------------------------------------
     5. ELEVATION · 火光打光 (no material grey shadows)
     -------------------------------------------------------- */

  /* Subtle inner border (engraved look) */
  --el-engrave:    inset 0 1px 0 rgba(255, 255, 255, 0.04),
                   inset 0 -1px 0 rgba(0, 0, 0, 0.35);

  /* Soft outer torch glow (warm) */
  --el-torch-sm:   0 4px 14px rgba(201, 163, 95, 0.10),
                   0 0 0 1px rgba(201, 163, 95, 0.08);
  --el-torch:      0 8px 28px rgba(201, 163, 95, 0.14),
                   0 0 0 1px rgba(201, 163, 95, 0.16);
  --el-torch-lg:   0 16px 48px rgba(201, 163, 95, 0.18),
                   0 0 0 1px rgba(201, 163, 95, 0.22);

  /* Press / focus */
  --el-press:      inset 0 2px 6px rgba(0, 0, 0, 0.4);
  --el-focus:      0 0 0 2px var(--c-gold-500), 0 0 0 4px var(--c-stone-900);

  /* ----------------------------------------------------------
     6. MOTION · 微妙不浮誇 (no pulse / no breathing)
     -------------------------------------------------------- */

  --dur-instant:  80ms;
  --dur-fast:     160ms;
  --dur-base:     240ms;
  --dur-slow:     400ms;
  --dur-stroll:   800ms;     /* 卷軸展開 */
  --dur-flicker:  ease-out;  /* fire flicker 用 keyframe + irregular */

  --ease-stone:   cubic-bezier(0.4, 0, 0.2, 1);     /* default */
  --ease-laurel:  cubic-bezier(0.2, 0.8, 0.2, 1);   /* gentle reveal */
  --ease-anvil:   cubic-bezier(0.7, 0, 0.84, 0);    /* heavy slam */

  /* ----------------------------------------------------------
     7. Z-INDEX
     -------------------------------------------------------- */

  --z-base:        0;
  --z-elevated:    10;
  --z-sticky:      100;
  --z-drawer:      200;
  --z-modal:       300;
  --z-toast:       400;
  --z-tooltip:     500;
}


/* ============================================================
   BASE COMPONENT CLASSES
   ─────────────────────────────────────────────────────────────
   通用層 component scaffolding · TTT-only details overlay 在
   tokens-ttt.css 內。前綴 .btn / .card 等 generic 名稱，主站
   全域可用。
   ============================================================ */

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  padding: 14px 24px;
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-stone),
    border-color     var(--dur-fast) var(--ease-stone),
    transform        var(--dur-fast) var(--ease-stone),
    filter           var(--dur-fast) var(--ease-stone);
}
.btn:focus-visible { outline: none; box-shadow: var(--el-focus); }
.btn:active { transform: translateY(1px); box-shadow: var(--el-press); }

.btn--primary {
  background: var(--c-gold-500);
  color: var(--c-stone-950);
  border-color: var(--c-gold-400);
  box-shadow: var(--el-engrave), 0 0 0 1px var(--c-gold-600);
}
.btn--primary:hover { background: var(--c-gold-400); }

.btn--ghost {
  background: transparent;
  color: var(--c-gold-500);
  border-color: var(--c-line-strong);
}
.btn--ghost:hover {
  border-color: var(--c-gold-400);
  color: var(--c-gold-400);
  background: rgba(201, 163, 95, 0.05);
}

.btn--ember {
  background: var(--c-ember-500);
  color: var(--c-stone-950);
  border-color: var(--c-ember-300);
}
.btn--ember:hover { background: var(--c-ember-300); }

.btn--sm { padding: 8px 14px; font-size: 0.6875rem; }
.btn--lg { padding: 18px 32px; font-size: 0.875rem; }


/* Card */
.card {
  background: var(--c-bg-elev-1);
  border: 1px solid var(--c-line-dim);
  border-radius: var(--r-xs);
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--c-line-dim);
  pointer-events: none;
}
.card--elev { box-shadow: var(--el-torch-sm); }
.card--flat { background: var(--c-bg-elev-1); }
.card--flat::before { content: none; }


/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--c-line-dim);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ivory-300);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-stone);
}
.chip:hover { border-color: var(--c-line); color: var(--c-ivory-200); }
.chip--on {
  background: var(--c-gold-500);
  color: var(--c-stone-950);
  border-color: var(--c-gold-400);
}


/* Eyebrow (section super-title) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold-500);
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--c-line-strong), transparent);
}


/* Mono text utility */
.mono {
  font-family: var(--font-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}


/* Accordion */
.accordion {
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
}
.accordion-row {
  border-top: 1px solid var(--c-line-dim);
}
.accordion-row:first-child { border-top: 0; }
.accordion-row[data-open="true"] { background: var(--c-bg-elev-1); }
.accordion-row__header {
  display: grid;
  grid-template-columns: 64px 1fr 24px;
  gap: var(--sp-5);
  padding: 22px 24px;
  align-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-stone);
}
.accordion-row__header:hover { background: var(--c-bg-elev-1); }
.accordion-row__body {
  padding: 0 24px 22px 88px;
  font-family: var(--font-serif);
  color: var(--c-text-muted);
  line-height: var(--lh-loose);
}


/* Laurel divider — generic horizontal rule */
.laurel-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-gold-600);
  text-transform: uppercase;
}
.laurel-divider::before,
.laurel-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
}


/* Focus ring — global a11y */
:focus-visible { outline: 2px solid var(--c-gold-500); outline-offset: 2px; }


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}