/* ============================================================
   COSZION — Brand System v1.0
   Warm Celestial palette + Cormorant/Inter type system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Symbols:wght@400;700&family=Noto+Sans+Symbols+2&display=swap');

/* Astro-glyph skins — subset to ~30 zodiac/planet glyphs each (tiny). Gives chart
   designs distinct symbol shapes. Quivira = engraved serif, DejaVu = rounded. */
@font-face{ font-family:"CzQuivira"; src:url("fonts/cz-quivira.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"CzDejaVu"; src:url("fonts/cz-dejavu.woff2") format("woff2"); font-display:swap; }
/* Astronomicon (OFL, Roberto Corona) — thin-line astro glyphs. LEGACY ASCII-mapped:
   each symbol lives at a Latin letter (Aries=A … Pisces=L, Sun=Q … Pluto=Z, Chiron=k,
   N.Node=g, S.Node=i, Rx=M). Glyphs are remapped from Unicode→ASCII in apps/natal/index.html
   (see CZ_ASTRONOMICON_MAP). Subset to just those 26 ASCII chars. */
@font-face{ font-family:"CzAstronomicon"; src:url("fonts/cz-astronomicon.woff2") format("woff2"); font-display:swap; }

:root{
  /* core palette */
  --midnight:    #0A0E1F;
  --ink:         #0E1320;
  --ink-2:       #141A29;
  --ink-3:       #1A2233;
  --line:        #232b3e;
  --line-2:      #313a4f;
  --cream:       #EFE6D6;
  --paper:       #F4EFE6;
  --gold:        #C8A35A;
  --gold-soft:   #D9B879;
  --gold-bright: #E5C47E;
  --plum:        #2A1A3A;
  --plum-2:      #3D2A52;

  /* semantics */
  --bg:        var(--midnight);
  --surface:   var(--ink);
  --surface-2: var(--ink-2);
  --surface-3: var(--ink-3);
  --text:      var(--cream);
  --text-soft: #c8c3b6;
  --muted:     #7a7f8f;
  --accent:    var(--gold);
  --accent-2:  var(--gold-soft);

  /* type */
  /* Display/heading font — Fraunces (Aqib's pick, 2026-05-23). Warm modern serif, web-loaded.
     Falls back to Avenir Next / Georgia off-web. Var kept named --serif (used site-wide for headings). */
  --serif: "Fraunces", "Avenir Next", Georgia, "Noto Sans Symbols 2", "Noto Sans Symbols", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, "Noto Sans Symbols 2", "Noto Sans Symbols", monospace;
  --astro-font: "Noto Sans Symbols 2", "Noto Sans Symbols", "Segoe UI Symbol", "Symbola", serif;

  /* scale */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow:    0 8px 32px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.7);
  --shadow-gold: 0 0 32px rgba(200,163,90,.18);

  /* motion — Emil's strong custom curves (lacking-punch built-ins replaced) */
  --ease: cubic-bezier(.32,.72,.32,1);          /* iOS drawer curve */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* strong ease-out for UI */
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);  /* snappy entrance */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* astro glyphs render text-style everywhere (kills color-emoji fallback) */
.glyph, .ag-asp, .asp-icon, .lot-name, .sign-glyph, .planet-glyph, [data-glyph]{font-family:var(--astro-font) !important}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  min-height:100vh;
  min-height:100dvh;
}
img,svg{display:block;max-width:100%}
button{font-family:inherit}
a{color:inherit;text-decoration:none}

/* type scales */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(40px, 7vw, 88px);line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(28px, 4vw, 48px);line-height:1.1;letter-spacing:-.01em}
h3{font-size:clamp(22px, 2.6vw, 32px);line-height:1.2}
h4{font-size:18px;line-height:1.3}

.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
.italic-z{font-style:italic;color:var(--gold);font-family:var(--serif)}

/* common components */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:14px 28px;border-radius:var(--r-full);
  cursor:pointer;border:1px solid transparent;
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out, transform 160ms var(--ease-out), box-shadow 220ms ease-out;
  white-space:nowrap;
  min-height:48px;
  will-change:transform;
}
.btn:active{transform:scale(0.97)}
.btn-primary{
  background:var(--gold);
  color:var(--midnight);
  border-color:var(--gold);
  box-shadow:var(--shadow-gold);
}
.btn-primary:hover{background:var(--gold-bright);box-shadow:0 0 48px rgba(200,163,90,.28)}
.btn-primary:active{background:var(--gold-bright);transform:scale(0.97)}
.btn-ghost{
  background:transparent;
  color:var(--cream);
  border-color:rgba(239,230,214,.18);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost:active{transform:scale(0.97)}

input,select,textarea{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text);
  padding:12px 14px;
  border-radius:var(--r-md);
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
  width:100%;
  min-height:48px;
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,163,90,.12)}
input::placeholder{color:#525d6f}
label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* containers */
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:760px;margin:0 auto;padding:0 24px}

/* divider */
.hr-gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border:0;margin:48px 0}

/* selection */
::selection{background:var(--gold);color:var(--midnight)}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* logo / sparkles */
.sparkle{display:inline-block;color:var(--gold)}
.sparkle::before{content:"✦"}
.sparkle-d::before{content:"✦✦"}

/* utility */
.muted{color:var(--muted)}
.gold{color:var(--gold)}
.cream{color:var(--cream)}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}

/* glow */
.glow-gold{filter:drop-shadow(0 0 14px rgba(200,163,90,.28))}
.glow-cream{filter:drop-shadow(0 0 14px rgba(239,230,214,.12))}

/* anim */
@keyframes twinkle{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.92)}
}
@keyframes fade-up{
  from{opacity:0;transform:translate3d(0, 12px, 0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@keyframes orbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* responsive */
@media (max-width:768px){
  body{font-size:14.5px}
  .container,.container-narrow{padding:0 18px}
  .btn{padding:12px 22px;font-size:12px}
}

/* ============================================================
   THEME: LIGHT MODE
   Activate via <html data-theme="light"> or <body data-theme="light">.
   Only semantic tokens are overridden — primitives (--midnight,
   --gold, --cream, etc.) stay untouched so brand identity holds.
   ============================================================ */
[data-theme="light"]{
  --bg:        #F4EFE6;
  --surface:   #FFFFFF;
  --surface-2: #FBF8F1;
  --surface-3: #F2EDDF;
  --line:      #E0D9C7;
  --line-2:    #C8BFA9;
  --text:      #1B2236;
  --text-soft: #3B445A;
  --muted:     #615B49;
  --accent:    #A87E2C;       /* darker gold for AA contrast on cream */
  --accent-2:  #C29347;

  --shadow-sm: 0 2px 8px rgba(40, 30, 12, .08);
  --shadow:    0 8px 32px rgba(40, 30, 12, .14);
  --shadow-lg: 0 24px 64px rgba(40, 30, 12, .20);
  --shadow-gold: 0 0 24px rgba(168, 126, 44, .16);
}
[data-theme="light"] .stars{
  background: radial-gradient(ellipse at top, #FAF6EB 0%, var(--bg) 70%, #EBE3D2 100%);
}
[data-theme="light"] .aurora{
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(168,126,44,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(180,140,90,.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(168,126,44,.06) 0%, transparent 60%);
}
[data-theme="light"] .nav{
  background: rgba(244, 239, 230, .82);
  border-bottom-color: rgba(160, 145, 110, .35);
}
[data-theme="light"] .btn-primary{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
[data-theme="light"] .btn-primary:hover{ background: var(--accent-2); }
[data-theme="light"] .btn-ghost{
  color: var(--text);
  border-color: rgba(30, 38, 60, .18);
}
[data-theme="light"] input::placeholder{ color: #aaa18a; }
[data-theme="light"] ::-webkit-scrollbar-track{ background: var(--surface-2); }
[data-theme="light"] ::-webkit-scrollbar-thumb{ background: var(--line-2); }
[data-theme="light"] ::selection{ background: var(--accent); color: #fff; }

/* explicit dark override (default already dark; useful when toggle stores 'dark') */
[data-theme="dark"]{
  --bg:        var(--midnight);
  --surface:   var(--ink);
  --surface-2: var(--ink-2);
  --surface-3: var(--ink-3);
  --text:      var(--cream);
  --text-soft: #c8c3b6;
  --muted:     #7a7f8f;
  --accent:    var(--gold);
  --accent-2:  var(--gold-soft);
}

/* respect OS preference if no explicit theme is set */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:        #F4EFE6;
    --surface:   #FFFFFF;
    --surface-2: #FBF8F1;
    --surface-3: #F2EDDF;
    --line:      #E0D9C7;
    --line-2:    #C8BFA9;
    --text:      #1B2236;
    --text-soft: #3B445A;
    --muted:     #615B49;
    --accent:    #A87E2C;
    --accent-2:  #C29347;
  }
}

/* ============================================================
   5-THEME SYSTEM. Each block overrides the PRIMITIVES; the
   semantic tokens (--bg/--surface/--text/--accent) are
   var()-aliases of these, so everything recolors. Default = ink.
   --star/--star-gold drive the canvas starfield (theme-aware).
   ============================================================ */
[data-theme="ink"]{
  --midnight:#0a0e1f; --ink:#0e1320; --ink-2:#141a29; --ink-3:#1a2233;
  --line:#232b3e; --line-2:#313a4f;
  --cream:#efe6d6; --text-soft:#c8c3b6; --muted:#7a7f8f;
  --gold:#c8a35a; --gold-soft:#d9b879; --gold-bright:#e5c47e; --plum:#2a1a3a;
  --star:#efe6d6; --star-gold:#e5c47e;
}
[data-theme="emeraldink"]{
  --midnight:#0d1f1a; --ink:#15302a; --ink-2:#1d3f37; --ink-3:#244b41;
  --line:#244b41; --line-2:#2f5e51;
  --cream:#e7f2ec; --text-soft:#a7c4ba; --muted:#6f8e83;
  --gold:#cda35e; --gold-soft:#d9b879; --gold-bright:#e5c47e; --plum:#13352a;
  --star:#e7f2ec; --star-gold:#e5c47e;
}
[data-theme="azure"]{
  --midnight:#ffffff; --ink:#f4f7fb; --ink-2:#e7eef6; --ink-3:#dbe6f2;
  --line:#dde6f2; --line-2:#c6d4e6;
  --cream:#1e3a6e; --text-soft:#51617e; --muted:#8693a8;
  --gold:#b07d1c; --gold-soft:#c08a1f; --gold-bright:#9a6d18; --plum:#eef3fb;
  --star:#1e3a6e; --star-gold:#b07d1c;
}
[data-theme="turquoise"]{
  --midnight:#ffffff; --ink:#eef7f7; --ink-2:#dfefef; --ink-3:#d2eaea;
  --line:#d6ebeb; --line-2:#bcdede;
  --cream:#0c4f57; --text-soft:#467074; --muted:#7c9598;
  --gold:#a87a1a; --gold-soft:#bf8a1e; --gold-bright:#946b16; --plum:#e9f6f6;
  --star:#0c4f57; --star-gold:#a87a1a;
}
[data-theme="rosegold"]{
  --midnight:#ffffff; --ink:#fbf5f3; --ink-2:#f3e7e4; --ink-3:#efdcd7;
  --line:#f0e0db; --line-2:#e0c7bf;
  --cream:#7e3742; --text-soft:#855a62; --muted:#a98a8f;
  --gold:#a86e24; --gold-soft:#bd7e2a; --gold-bright:#945f20; --plum:#fbf0ed;
  --star:#7e3742; --star-gold:#a86e24;
}
/* light themes: lighten the cosmic backdrop so dark specks read */
[data-theme="azure"] .stars,
[data-theme="turquoise"] .stars,
[data-theme="rosegold"] .stars{
  background: radial-gradient(ellipse at top, #ffffff 0%, color-mix(in srgb, var(--ink) 70%, #ffffff) 70%, color-mix(in srgb, var(--ink-2) 80%, #ffffff) 100%);
}
[data-theme="azure"] .aurora,
[data-theme="turquoise"] .aurora,
[data-theme="rosegold"] .aurora{ opacity:.45; }

/* theme switcher control + popup menu */
.cz-theme-toggle{ display:inline-flex; align-items:center; justify-content:center; }
.cz-theme-toggle .cz-theme-dot{ width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); display:inline-block; }
.cz-theme-menu{
  position:fixed; z-index:300; display:none; flex-direction:column; gap:2px;
  background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:0 16px 48px rgba(0,0,0,.45); min-width:170px;
}
.cz-theme-menu.open{ display:flex; }
.cz-theme-menu button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:transparent; border:0; cursor:pointer; padding:9px 11px; border-radius:8px;
  color:var(--cream); font-family:var(--sans); font-size:13px; letter-spacing:.01em;
}
.cz-theme-menu button:hover{ background:var(--surface-2); }
.cz-theme-menu .cz-sw{ width:15px; height:15px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(150,150,150,.35); }