/* =========================================================================
   ASTRAL CITY · Core foundations
   Colors, typography, motion, elevation.
   Import this file into any design surface (site, deck, UI kit).
   ========================================================================= */

/* --- Webfonts -----------------------------------------------------------
   Display + Body: Host Grotesk — the confirmed Astral City brand typeface.
   Weights 300–800 loaded. No separate display/body font split; Host Grotesk
   serves both roles at different weights and sizes.
   Mono: JetBrains Mono (for code, stats, NDA-table rows, pagination).
   ⚠ Note: the "Astral City" wordmark is a custom-drawn logotype — not
   a live font. Use logo PNGs from assets/logos/ for all brand lockups.
   ----------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Font aliases — used everywhere via these variables */
:root {
  --ac-font-display: 'Host Grotesk', sans-serif;
  --ac-font-body:    'Host Grotesk', sans-serif;
  --ac-font-mono:    'JetBrains Mono', monospace;
  /* ------------------------------------------------------------------ */
  /* 1. CORE PALETTE                                                    */
  /* ------------------------------------------------------------------ */

  /* — Astral Indigo (primary brand surface) — sampled from website hero  */
  --ac-indigo-1000: #0B0524;   /* near-black indigo — deep space */
  --ac-indigo-900:  #140932;   /* hero fallback / sidebar */
  --ac-indigo-800:  #1D0F3E;   /* primary dark bg (matches site dark band) */
  --ac-indigo-700:  #2A1957;   /* hover / raised surface on dark */
  --ac-indigo-600:  #3B2676;   /* divider on dark */

  /* — Lime (accent / signal) — sampled from "A/25" deck pagination mark  */
  --ac-lime-500:  #CFFF3E;     /* primary accent */
  --ac-lime-400:  #DCFF6A;     /* hover lift */
  --ac-lime-600:  #A8D424;     /* pressed / icon on light */
  --ac-lime-100:  #EEFFC0;     /* lime wash */

  /* — Mint (soft contrast section) — sampled from website about band     */
  --ac-mint-200:  #DBEDD9;     /* light section bg */
  --ac-mint-300:  #C2E0C0;     /* hover tint */
  --ac-mint-500:  #8FC98B;     /* accent on mint */

  /* — Iridescent spectrum (pulled from brand imagery — for illustration,
       gradients, chart categories; NOT for UI chrome)                    */
  --ac-iris-peach: #F7BFA8;
  --ac-iris-coral: #E88570;
  --ac-iris-teal:  #7FC9B8;
  --ac-iris-mint:  #A8DCB5;
  --ac-iris-plum:  #8B6BA8;
  --ac-iris-sand:  #E8C79A;

  /* — Neutral scale (warm-leaning greys so imagery sits in harmony) —    */
  --ac-black:     #0A0814;
  --ac-ink-900:   #151221;
  --ac-ink-700:   #2D2A3A;
  --ac-ink-500:   #5E5A6D;
  --ac-ink-400:   #8A8799;
  --ac-ink-300:   #B8B5C2;
  --ac-ink-200:   #D8D5DF;
  --ac-ink-100:   #EBE9F0;
  --ac-ink-50:    #F6F4F9;
  --ac-white:     #FFFFFF;

  /* — Semantic tokens (theme-aware; overridden by [data-theme="light"])  */
  --ac-bg:          var(--ac-indigo-800);
  --ac-bg-raised:   var(--ac-indigo-700);
  --ac-bg-sunken:   var(--ac-indigo-900);
  --ac-bg-inverse:  var(--ac-mint-200);

  --ac-fg:          var(--ac-white);
  --ac-fg-muted:    rgba(255,255,255,0.72);
  --ac-fg-subtle:   rgba(255,255,255,0.48);
  --ac-fg-disabled: rgba(255,255,255,0.28);
  --ac-fg-inverse:  var(--ac-ink-900);

  --ac-accent:      var(--ac-lime-500);
  --ac-accent-fg:   var(--ac-indigo-900);   /* text/icons drawn in lime */
  --ac-on-accent:   var(--ac-indigo-900);   /* text drawn ON lime */

  --ac-border:         rgba(255,255,255,0.14);
  --ac-border-strong:  rgba(255,255,255,0.28);
  --ac-border-accent:  var(--ac-lime-500);

  --ac-focus-ring: 0 0 0 3px rgba(207,255,62,0.55);

  /* — Status (muted; Astral rarely uses saturated alerts)               */
  --ac-success: #8FC98B;
  --ac-warning: #E8C79A;
  --ac-danger:  #E88570;
  --ac-info:    #7FC9B8;

  /* ------------------------------------------------------------------ */
  /* 2. TYPOGRAPHY                                                       */
  /* ------------------------------------------------------------------ */
  --ac-font-display: 'Host Grotesk', sans-serif;
  --ac-font-body:    'Host Grotesk', sans-serif;
  --ac-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ac-weight-light:    300;
  --ac-weight-regular:  400;
  --ac-weight-medium:   500;
  --ac-weight-semibold: 600;
  --ac-weight-bold:     700;
  --ac-weight-black:    800;

  /* Fluid type ramp — display ramps harder; body stays UI-legible */
  --ac-type-display-xl: clamp(56px, 9vw, 144px);   /* "Astral City" hero */
  --ac-type-display-lg: clamp(44px, 6vw,  96px);   /* section toplines */
  --ac-type-display-md: clamp(32px, 4vw,  64px);   /* slide titles */
  --ac-type-h1:         clamp(32px, 3.2vw, 48px);
  --ac-type-h2:         clamp(26px, 2.4vw, 36px);
  --ac-type-h3:         22px;
  --ac-type-h4:         18px;
  --ac-type-body:       16px;
  --ac-type-body-lg:    18px;
  --ac-type-small:      14px;
  --ac-type-caption:    12px;
  --ac-type-mono:       13px;

  --ac-lh-tight:   1.02;   /* display */
  --ac-lh-snug:    1.15;   /* headings */
  --ac-lh-normal:  1.5;    /* body */
  --ac-lh-loose:   1.7;    /* long-form body */

  --ac-tracking-tight:  -0.025em;
  --ac-tracking-normal: -0.005em;
  --ac-tracking-wide:    0.08em;   /* eyebrow / ALL CAPS labels */
  --ac-tracking-wider:   0.18em;   /* slide pagination, section markers */

  /* ------------------------------------------------------------------ */
  /* 3. SPACING · RADII · ELEVATION                                      */
  /* ------------------------------------------------------------------ */
  --ac-space-0:  0;
  --ac-space-1:  4px;
  --ac-space-2:  8px;
  --ac-space-3:  12px;
  --ac-space-4:  16px;
  --ac-space-5:  24px;
  --ac-space-6:  32px;
  --ac-space-7:  48px;
  --ac-space-8:  64px;
  --ac-space-9:  96px;
  --ac-space-10: 128px;

  /* Radii — Astral uses crisp corners (buttons are typically 0 or 2px).
     Illustrations and hero panels may have slight rounding. */
  --ac-radius-0:  0;
  --ac-radius-1:  2px;
  --ac-radius-2:  4px;
  --ac-radius-3:  8px;
  --ac-radius-4:  12px;
  --ac-radius-5:  16px;
  --ac-radius-pill: 999px;

  /* Borders */
  --ac-hairline: 1px;
  --ac-rule:     1px;
  --ac-rule-thick: 2px;

  /* Shadows — used sparingly. On dark surfaces we use an inner hairline
     rather than a drop shadow.  On light surfaces a soft warm shadow.    */
  --ac-shadow-sm:  0 1px 2px rgba(10,8,20,0.12);
  --ac-shadow-md:  0 6px 18px rgba(10,8,20,0.18);
  --ac-shadow-lg:  0 20px 48px rgba(10,8,20,0.28);
  --ac-shadow-glow: 0 0 0 1px rgba(207,255,62,0.35), 0 8px 32px rgba(207,255,62,0.25);
  --ac-shadow-inset-hairline: inset 0 0 0 1px rgba(255,255,255,0.08);

  /* ------------------------------------------------------------------ */
  /* 4. MOTION                                                           */
  /* ------------------------------------------------------------------ */
  --ac-ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);        /* default UI */
  --ac-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);        /* transitions */
  --ac-ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);         /* hero reveals */
  --ac-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);     /* rare; chips */
  --ac-dur-fast:     120ms;
  --ac-dur-base:     200ms;
  --ac-dur-slow:     420ms;
  --ac-dur-hero:     900ms;

  /* ------------------------------------------------------------------ */
  /* 5. LAYOUT                                                           */
  /* ------------------------------------------------------------------ */
  --ac-container:      1280px;
  --ac-container-wide: 1440px;
  --ac-gutter:         clamp(20px, 4vw, 64px);

  /* Slide canvas */
  --ac-slide-w: 1920px;
  --ac-slide-h: 1080px;
  --ac-slide-pad: 96px;
}

/* =========================================================================
   LIGHT THEME (mint / cream band — used for "about" + content sections)
   ========================================================================= */
[data-theme="light"] {
  --ac-bg:         var(--ac-mint-200);
  --ac-bg-raised:  var(--ac-white);
  --ac-bg-sunken:  var(--ac-mint-300);
  --ac-bg-inverse: var(--ac-indigo-800);

  --ac-fg:          var(--ac-ink-900);
  --ac-fg-muted:    var(--ac-ink-500);
  --ac-fg-subtle:   var(--ac-ink-400);
  --ac-fg-disabled: var(--ac-ink-300);
  --ac-fg-inverse:  var(--ac-white);

  --ac-accent-fg:   var(--ac-ink-900);
  --ac-border:        rgba(21,18,33,0.10);
  --ac-border-strong: rgba(21,18,33,0.22);
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================= */
.ac-display-xl,
.ac-display-lg,
.ac-display-md,
.ac-h1, .ac-h2, .ac-h3, .ac-h4 {
  font-family: var(--ac-font-display);
  font-weight: var(--ac-weight-semibold);
  line-height: var(--ac-lh-tight);
  letter-spacing: var(--ac-tracking-tight);
  text-wrap: balance;
  margin: 0;
}
.ac-display-xl { font-size: var(--ac-type-display-xl); font-weight: var(--ac-weight-bold); }
.ac-display-lg { font-size: var(--ac-type-display-lg); }
.ac-display-md { font-size: var(--ac-type-display-md); line-height: var(--ac-lh-snug); }
.ac-h1 { font-size: var(--ac-type-h1); line-height: var(--ac-lh-snug); }
.ac-h2 { font-size: var(--ac-type-h2); line-height: var(--ac-lh-snug); }
.ac-h3 { font-size: var(--ac-type-h3); line-height: var(--ac-lh-snug); letter-spacing: var(--ac-tracking-normal); }
.ac-h4 { font-size: var(--ac-type-h4); line-height: var(--ac-lh-snug); font-weight: var(--ac-weight-medium); letter-spacing: 0; }

.ac-body,
.ac-body-lg,
.ac-small {
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-regular);
  line-height: var(--ac-lh-normal);
  margin: 0;
  text-wrap: pretty;
}
.ac-body     { font-size: var(--ac-type-body);    line-height: var(--ac-lh-loose); }
.ac-body-lg  { font-size: var(--ac-type-body-lg); line-height: var(--ac-lh-loose); }
.ac-small    { font-size: var(--ac-type-small); }
.ac-caption  { font-family: var(--ac-font-body); font-size: var(--ac-type-caption); color: var(--ac-fg-muted); line-height: var(--ac-lh-normal); }

.ac-mono     { font-family: var(--ac-font-mono); font-size: var(--ac-type-mono); letter-spacing: 0; }

/* Eyebrow / section marker — ALL CAPS, wide tracking, small.
   Used a LOT in the Astral deck (e.g. "RECENT ARTICLES"). */
.ac-eyebrow {
  font-family: var(--ac-font-body);
  font-size: var(--ac-type-caption);
  font-weight: var(--ac-weight-medium);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-fg-muted);
}

/* Pagination marker: "A / 25" – mono, lime, wide tracking */
.ac-page-marker {
  font-family: var(--ac-font-display);
  font-weight: var(--ac-weight-bold);
  font-size: 28px;
  letter-spacing: var(--ac-tracking-wide);
  color: var(--ac-lime-500);
}

/* Utility */
.ac-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--ac-dur-fast) var(--ac-ease-out);
}
.ac-link:hover { opacity: 0.7; }

/* Base body reset (opt-in) */
.ac-root {
  background: var(--ac-bg);
  color: var(--ac-fg);
  font-family: var(--ac-font-body);
  font-size: var(--ac-type-body);
  line-height: var(--ac-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}