/* =========================================================
   Design Tokens — 秦腔推广方案
   Art-gallery aesthetic: warm ivory + charcoal + crimson
   ========================================================= */

:root {
  /* --- Color Palette --- */
  --color-bg:          #faf7f2;   /* warm ivory page background */
  --color-surface:     #f5f0ea;   /* subtle off-white, table rows */
  --color-surface-alt: #efe9e0;   /* hover / active surface */
  --color-ink:         #1a1806;   /* near-black text */
  --color-ink-subtle:  #6b6357;   /* secondary text, captions */
  --color-ink-muted:   #a89f94;   /* placeholders, disabled */
  --color-rule:        #d8cfc5;   /* thin border / divider lines */
  --color-rule-dark:   #b0a497;   /* stronger separator */
  --color-accent:      #8b2500;   /* Qin Opera crimson (strong) */
  --color-accent-mid:  #b83d1a;   /* accent hover */
  --color-accent-soft: #f2e4dc;   /* tinted accent background */
  --color-white:       #ffffff;

  /* --- Typography --- */
  --font-serif:   'Noto Serif SC', 'Source Han Serif SC', 'STSong', Georgia, serif;
  --font-sans:    'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */

  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.9;

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

  /* --- Spacing Scale --- */
  --sp-1:   0.25rem;   /* 4px  */
  --sp-2:   0.5rem;    /* 8px  */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */

  /* --- Border Radius --- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Shadow --- */
  --shadow-sm:  0 1px 3px rgba(26,24,6,0.06), 0 1px 2px rgba(26,24,6,0.04);
  --shadow-md:  0 4px 16px rgba(26,24,6,0.08), 0 2px 4px rgba(26,24,6,0.04);
  --shadow-lg:  0 12px 40px rgba(26,24,6,0.12), 0 4px 8px rgba(26,24,6,0.06);
  --shadow-img: 0 24px 64px rgba(26,24,6,0.20), 0 8px 16px rgba(26,24,6,0.10);

  /* --- Motion --- */
  --ease-gallery: cubic-bezier(0.16, 1, 0.3, 1);  /* crisp deceleration */
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  --dur-fast:   180ms;
  --dur-base:   300ms;
  --dur-slow:   600ms;
  --dur-reveal: 900ms;

  /* --- Layout --- */
  --container-max: min(calc(100vw - 48px), 1600px);
  --container-xl:  1100px;
  --content-px:    clamp(1.5rem, 5vw, 4rem);

  /* --- Z-Layers --- */
  --z-base:    1;
  --z-float:   10;
  --z-overlay: 100;
}