/* Pleionia — design tokens
   ─────────────────────────────────────────────────────────
   Color philosophy: plum + ink as ground, dusty rose as flesh,
   warm gold as ceremonial accent (used sparingly — foil-stamp logic).
   Light mode reads as warm rose-paper, dark mode as deep aubergine. */

:root {
  /* Light (default) */
  --bg:           #F4ECE7;   /* warm rose-bone paper */
  --bg-2:         #ECE0DA;   /* tinted recessed surface */
  --surface:      #FBF6F2;   /* card */
  --surface-2:    #FFFFFF;   /* elevated card */
  --ink:          #1A0E22;   /* deep aubergine, near-black */
  --ink-soft:     #4A3253;   /* secondary text */
  --ink-mute:     #7B607D;   /* tertiary text */
  --hairline:     rgba(26, 14, 34, 0.10);
  --hairline-2:   rgba(26, 14, 34, 0.06);

  --plum-deep:    #2A1430;
  --plum:         #4D2255;
  --plum-soft:    #6E3D78;
  --mauve:        #B084AC;
  --rose:         #CB6E96;
  --rose-soft:    #E2A6BD;
  --blush:        #F1D8E0;

  --gold:         #B69155;   /* refined antique gold */
  --gold-bright:  #D4AE6A;
  --gold-leaf:    #E6CFA0;

  /* type ramps */
  --font-display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --font-body:    "Newsreader", "Source Serif 4", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-ui:      "Bricolage Grotesque", system-ui, sans-serif;

  /* radii / shadows */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-card:   0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(26,14,34,0.04), 0 6px 18px rgba(26,14,34,0.04);
  --shadow-lift:   0 24px 60px rgba(26,14,34,0.16), 0 2px 6px rgba(26,14,34,0.08);
}

[data-theme="dark"] {
  --bg:           #120817;
  --bg-2:         #1A0F22;
  --surface:      #1E1226;
  --surface-2:    #261830;
  --ink:          #F4ECE7;
  --ink-soft:     #C8B5C8;
  --ink-mute:     #8E7593;
  --hairline:     rgba(244, 236, 231, 0.10);
  --hairline-2:   rgba(244, 236, 231, 0.05);

  --plum-deep:    #0B040F;
  --plum:         #2A1430;
  --plum-soft:    #3D1F46;
  --mauve:        #C29CBE;
  --rose:         #E48AAE;
  --rose-soft:    #D78AA8;
  --blush:        #3D1F35;

  --gold:         #D4AE6A;
  --gold-bright:  #E6C480;
  --gold-leaf:    #5B4824;

  --shadow-card:   0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-lift:   0 24px 60px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
}

/* Force text rendering for all astrological glyphs (Unicode codepoints
   that browsers otherwise color-emoji-ify). U+FE0E variation selectors
   on the strings are belt-and-suspenders. */
html, body, svg, svg text { font-variant-emoji: text; }

/* utility classes used across screens */
.pl-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
.pl-display-tight { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; }
.pl-serif { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; }
.pl-mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.02em; font-feature-settings: "tnum"; }
.pl-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* light/dark surface helpers */
.pl-surface { background: var(--surface); border-radius: var(--r-lg); }
.pl-rule { height: 1px; background: var(--hairline); }
.pl-rule-2 { height: 1px; background: var(--hairline-2); }