:root {
  --bg-color: #f4e7d7;
  --primary-jade: #1C4A3C;
  --accent-gold: #B8860B;
  --text-main: #2C2C2C;
  --primary-warning: #CB213A;

  --light-jade: rgba(28,74,60,0.08);
  --medium-jade: rgba(28,74,60,0.67);
  --soft-white: #FAFAF8;
  --warm-cream: #ffecf0;
  --soft-peach: #FFE8D6;

  --color-practice: #1c4a3c;
  --color-ceremony: #b8860b;
  --color-course: #6b5b95;

  --ink-85: rgba(44,44,44,.85);
  --ink-70: rgba(44,44,44,.70);
  --ink-55: rgba(44,44,44,.55);
  --ink-40: rgba(44,44,44,.40);
  --ink-25: rgba(44,44,44,.25);

  --paper: rgba(255,255,255,.70);
  --paper-2: rgba(255,255,255,.46);
  --paper-veil: rgba(255,255,255,.44);
  --paper-edge: rgba(44,44,44,.10);
  --paper-edge-soft: rgba(44,44,44,.07);
  --rule: rgba(44,44,44,.12);
  --blur: blur(10px);

  --gold-gradient: linear-gradient(135deg, #C9A962 0%, #B8860B 50%, #8B6914 100%);
  --jade-gradient: linear-gradient(135deg, #1C4A3C 0%, #2d6b56 50%, #1C4A3C 100%);

  --shadow: 0 14px 34px rgba(0,0,0,.08);
  --shadow-soft: 0 8px 22px rgba(0,0,0,.06);
  --shadow-deep: 0 20px 50px rgba(28,74,60,.12);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --title-track: .06em;
  --body-track: .02em;
  --container: 1040px;
  --focus: 0 0 0 3px rgba(184,134,11,.22);
  --font-scale: 1.4;

  --rail-w: 7em;
  --rail-offset: 18px;
  --rail-breath: 12px;
  /* 側邊欄實際佔用的視覺寬度（側邊欄不受 zoom 影響，故為未縮放值） */
  --rail-gutter-raw: calc(var(--rail-w) + var(--rail-offset) + var(--rail-breath));
  --rail-gutter: var(--rail-gutter-raw);
}

@media (min-width: 861px) and (max-width: 1180px) {
  :root { --rail-breath: 18px; }
}

@media (max-width: 860px),
       ((max-width: 1024px) and (max-height: 500px) and (pointer: coarse)) {
  :root {
    --rail-gutter-raw: 0px;
    --rail-gutter: 0px;
    --mobile-font-tools-height: 52px;
    --mobile-menu-btn-size: 44px;
    --mobile-top-chrome: calc(12px + var(--mobile-menu-btn-size));
  }
}

@media (max-width: 599px) {
  :root { --bp-phone: 1; }
}