/* ============================================================
   BASE.CSS — design tokens, reset, typography, body
   Digital Atelier · Medical Aesthetics Luxury System
   ============================================================ */

/* ----- Design Tokens ----- */
:root {
  /* Background tiers (no-line principle: depth via color, not borders) */
  --bg-main:    #fbf9f7;   /* surface — warm sand */
  --bg-depth:   #f5f3f1;   /* surface-container-low */
  --bg-section: #efeeeb;   /* surface-container — section bands */
  --bg-ink:     #313331;   /* on-surface dark */

  /* Card surfaces */
  --card:          #ffffff;   /* surface-container-lowest — lifted white */
  --card-strong:   #ffffff;
  --card-elevated: #ffffff;

  /* Borders — ghost only, felt not seen */
  --line:        rgba(177, 178, 176, 0.18);
  --line-strong: rgba(177, 178, 176, 0.35);

  /* Text */
  --text:   #313331;   /* on-surface — warm near-black, never pure black */
  --muted:  #5e5f5d;   /* on-surface-variant */
  --subtle: #7a7b79;   /* outline */

  /* Brand — Burnished Copper */
  --accent:       #7a583b;   /* primary */
  --accent-hover: #6c4c30;   /* primary-dim */
  --accent-deep:  #503419;   /* on-primary-fixed */
  --accent-soft:  rgba(255, 209, 172, 0.3);  /* primary-container light */
  --accent-text:  #fff7f4;   /* on-primary */

  /* Secondary warm */
  --accent-2:      #6f5b4a;   /* secondary */
  --accent-2-hover:#614e3e;
  --accent-2-soft: rgba(249, 221, 200, 0.4);  /* secondary-container */

  /* Gold highlight (for data numerals) */
  --gold:      #c9a96e;
  --gold-soft: rgba(201, 169, 110, 0.18);

  /* Functional */
  --success:      #3a9d7c;
  --success-soft: rgba(58, 157, 124, 0.12);
  --danger:       #d4534b;
  --danger-soft:  rgba(212, 83, 75, 0.12);
  --warning:      #d4a24e;
  --warning-soft: rgba(212, 162, 78, 0.12);

  /* Ambient shadow — copper tint, never grey */
  --shadow-ambient: 0 12px 40px rgba(122, 88, 59, 0.06);
  --shadow-hover:   0 20px 56px rgba(122, 88, 59, 0.10);

  /* Layout */
  --nav-height:  64px;
  --shell-max:   1160px;
  --nav-max:     1440px;
  --radius-card: 16px;
  --radius-inner: 12px;
  --radius-btn:  999px;    /* pill — per design system */
  --radius-pill: 999px;
  --radius-input: 8px;
}

@media (max-width: 640px) {
  :root {
    --nav-height: 56px;
    --radius-card: 12px;
    --radius-inner: 10px;
  }
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
html { scrollbar-gutter: stable; }

/* ----- Body ----- */
body {
  color: var(--text);
  font-family: "Manrope", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--nav-height);
}

/* ----- Typography ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Serif SC", "Noto Serif", "Bodoni Moda", "Songti SC", "STSong", serif;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}

/* 展示级标题保留铜色品牌感 */
h1, .h-display, .at-display { color: var(--accent); }

p, ul, ol, dl { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ----- Keyframes ----- */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes revealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes revealScale {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ----- Utility ----- */
.text-shimmer {
  background: linear-gradient(90deg, var(--accent) 20%, var(--gold) 50%, var(--accent) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s ease-in-out infinite;
}

.eyebrow {
  display: inline-block;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ----- Layout shell ----- */
.shell {
  position: relative;
  max-width: var(--shell-max);
  margin: 24px auto;
  padding: 0 16px 64px;
}

/* ----- Mobile responsive base ----- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .shell { margin: 16px auto; padding: 0 12px 48px; }
}

/* ----- Global focus-visible ring ----- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  border-radius: var(--radius-pill);
}
.card:focus-visible,
.scenario-card:focus-visible,
.h-feature-tab:focus-visible,
.h-value-item:focus-visible {
  border-radius: var(--radius-card);
}