/* ═══════════════════════════════════════════════════════
   MansionOS · Design Tokens
   Single source of truth for all visual decisions
   ═══════════════════════════════════════════════════════ */

:root {

  /* ── Core Brand Colors ─────────────────────────────── */
  --color-green:        #7B8760;   /* Primary · buttons, borders, accents */
  --green-hover:        #6A7550;   /* Button hover + pressed (active). Gold is NEVER used for button states. */
  --color-green-deep:   #4D5838;   /* Body text on light bg */
  --color-green-muted:  rgba(77,88,56,.2);  /* Borders */
  --color-green-subtle: rgba(77,88,56,.06); /* Card backgrounds */
  --color-gold:         #A08858;   /* Secondary · price tags, highlights */
  --color-gold-star:    #C4922A;   /* Main star center */
  --color-gold-light:   rgba(160,136,88,.3); /* Gold borders */
  --color-cream:        #FDFBF7;   /* Card surfaces, button text */
  --color-bg:           #F5F2EB;   /* App background */
  --color-bg-dark:      #E8E4DC;   /* Page background behind app */
  --color-ink:          #2C2520;   /* Primary text */
  --color-ink-muted:    rgba(44,37,32,.45); /* Secondary text */
  --color-ink-ghost:    rgba(44,37,32,.28); /* Placeholder, hints */

  /* ── Five Elements · Morandi ───────────────────────── */
  --color-fire:   #C4909A;   /* 火 · Dusty rose */
  --color-earth:  #C8A870;   /* 土 · Warm sand */
  --color-water:  #7A90A8;   /* 水 · Slate blue */
  --color-wood:   #8AAA85;   /* 木 · Sage green */
  --color-metal:  #C0B898;   /* 金 · Faded pearl */

  /* ── Zodiac Colors · 12 animals ────────────────────── */
  --zodiac-rat:     #4860A8;   /* 鼠 · Indigo blue */
  --zodiac-ox:      #C8A428;   /* 牛 · Ochre gold */
  --zodiac-tiger:   #2A6845;   /* 虎 · Deep forest */
  --zodiac-rabbit:  #7AAA82;   /* 兔 · Celadon */
  --zodiac-dragon:  #9A6420;   /* 龙 · Bronze */
  --zodiac-snake:   #D4789A;   /* 蛇 · Dusty pink */
  --zodiac-horse:   #C4909A;   /* 马 · Deep dusty rose */
  --zodiac-goat:    #C8A870;   /* 羊 · Wheat sand */
  --zodiac-monkey:  #B08838;   /* 猴 · Antique gold */
  --zodiac-rooster: #C0B090;   /* 鸡 · Pearl */
  --zodiac-dog:     #8A5238;   /* 狗 · Terracotta */
  --zodiac-pig:     #5A5A8A;   /* 猪 · Muted indigo */

  /* ── Dark Mode (ref landing, pairing block) ─────────── */
  --color-dark-bg:     #1A2818;   /* Deep forest green */
  --color-dark-text:   #FDFBF7;
  --color-dark-muted:  rgba(253,251,247,.55);
  --color-dark-ghost:  rgba(253,251,247,.28);
  --color-dark-gold:   rgba(200,168,75,.7);

  /* ── Typography ────────────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-serif:    Georgia, 'Times New Roman', serif;
  --font-sans:     -apple-system, BlinkMacSystemFont, sans-serif;
  --font-zh:       'Noto Serif SC', 'PingFang SC', serif;

  --text-xs:    7px;     /* Labels, metadata */
  --text-sm:    8.5px;   /* UI labels */
  --text-body:  13.5px;  /* Body text */
  --text-md:    14px;    /* Card titles */
  --text-lg:    18px;    /* Section heads */
  --text-xl:    22px;    /* Screen titles */
  --text-2xl:   28px;    /* Hero text */
  --text-3xl:   32px;    /* Price display */
  --text-score: 26px;    /* Friction score */

  --tracking-wide:  .28em;  /* Uppercase labels */
  --tracking-md:    .16em;  /* Card labels */
  --tracking-sm:    .1em;   /* Body labels */

  /* ── Spacing ───────────────────────────────────────── */
  --page-x:     24px;   /* Horizontal page padding */
  --section-y:  22px;   /* Vertical section gap */
  --card-x:     14px;   /* Card horizontal padding */
  --card-y:     12px;   /* Card vertical padding */
  --gap-sm:     8px;
  --gap-md:     12px;
  --gap-lg:     20px;

  /* ── Borders ───────────────────────────────────────── */
  --border:         .8px solid rgba(77,88,56,.2);
  --border-subtle:  .8px solid rgba(77,88,56,.1);
  --border-gold:    .8px solid rgba(160,136,88,.3);
  --border-dashed:  .8px dashed rgba(77,88,56,.2);
  --border-accent:  2px solid #7B8760;  /* Tagline left bar */

  /* ── Radius ─────────────────────────────────────────── */
  --radius: 0;   /* Square aesthetic throughout */

  /* ── Shadows ────────────────────────────────────────── */
  --shadow: none;   /* Flat design, no shadows */

  /* ── Compass ────────────────────────────────────────── */
  --compass-size:       300px;
  --compass-r-outer:    134px;   /* Outer decorative ring */
  --compass-r-elements: 120px;   /* Five elements arcs */
  --compass-r-zodiac:   92px;    /* Zodiac ring */
  --compass-r-inner:    66px;    /* Inner circle */
  --elements-stroke:    16px;    /* Arc stroke width */

  /* ── Animations ─────────────────────────────────────── */
  --spin-outer:   40s;    /* Outer ring rotation */
  --spin-inner:   28s;    /* Inner ring (reverse) */
  --float-speed:  7s;     /* Compass float */
  --glow-speed:   3s;     /* Star glow pulse */
  --aura-speed:   4s;     /* Daily aura pulse */
  --transition:   .2s;    /* Standard UI transition */
  --expand:       .25s;   /* Accordion expand */

  /* ── Z-index ────────────────────────────────────────── */
  --z-modal:    100;
  --z-toast:    999;
  --z-install:  99;

  /* ── Max width ──────────────────────────────────────── */
  --app-max:  390px;   /* Mobile-first max width */
}

/* ── Utility classes from tokens ────────────────────── */

/* Text */
.label-sm  { font-family:var(--font-sans); font-size:var(--text-sm); letter-spacing:var(--tracking-wide); color:var(--color-green); text-transform:uppercase; }
.label-xs  { font-family:var(--font-sans); font-size:var(--text-xs); letter-spacing:var(--tracking-md);   color:var(--color-ink-ghost); text-transform:uppercase; }
.serif-lg  { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:300; font-style:italic; color:var(--color-ink); line-height:1.1; }
.serif-md  { font-family:var(--font-serif); font-size:var(--text-xl);  font-weight:200; font-style:italic; color:var(--color-ink); }
.body-text { font-family:var(--font-serif); font-size:var(--text-body); color:var(--color-ink); line-height:1.8; }
.tagline   { font-family:var(--font-serif); font-size:13px; font-style:italic; color:var(--color-green-deep); line-height:1.75; }
.zh-deco   { font-family:var(--font-zh); font-weight:200; color:rgba(77,88,56,.38); letter-spacing:.12em; }

/* Buttons */
.btn-primary {
  display: block;
  width: calc(100% - 48px);
  margin: 0 auto;
  background: var(--color-green);
  border: none;
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-md);
  text-transform: uppercase;
  padding: 16px;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-primary:hover  { background: var(--green-hover); }
.btn-primary:active { background: var(--green-hover); }
.btn-note {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  color: var(--color-ink-ghost);
  text-transform: uppercase;
  margin-top: 8px;
}

/* Cards */
.card {
  background: var(--color-cream);
  border: var(--border);
  overflow: hidden;
}

/* Tagline block */
.tagline-block {
  margin: 0 var(--page-x);
  padding: 14px 16px 14px 18px;
  border-left: var(--border-accent);
  background: rgba(77,88,56,.04);
}

/* Divider */
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px var(--page-x);
}
.divider-line { flex:1; height:1px; background:rgba(77,88,56,.18); }
.divider-dot  { width:4px; height:4px; border-radius:50%; background:rgba(160,136,88,.4); }
.sec-divider  { height:1px; background:rgba(77,88,56,.13); margin:22px 0; }

/* Lock row */
.lock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 var(--page-x);
  padding: 12px 14px;
  background: rgba(77,88,56,.05);
  border: var(--border);
}
.unlock-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-md);
  color: var(--color-cream);
  background: var(--color-green);
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Expand accordion */
.expand-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px var(--page-x) 0;
  padding: 11px 14px;
  border: var(--border);
  background: transparent;
  cursor: pointer;
  width: calc(100% - 48px);
}
.expand-arrow { font-size:10px; color:rgba(77,88,56,.5); transition:transform var(--expand); }
.expand-arrow.open { transform: rotate(180deg); }
.expand-body { display:none; padding:14px var(--page-x) 0; }
.expand-body.open { display:block; }