/* ============================================================
   FIREFLY — Colors & Type Foundations
   Live recorded music sessions · spark//records®
   ============================================================ */

/* ---- Fonts ------------------------------------------------- */
/* Hasubi Mono — the primary functional voice of the brand.
   Variable weight font supplied by the brand. */
@font-face {
  font-family: "Hasubi Mono";
  src: url("fonts/Hasubi-Mono.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Anton — SUBSTITUTE for the tall, fat condensed poster numerals
   ("7 JUNE"). The brand's exact poster face was not supplied;
   Anton is the nearest free match (heavy, ultra-condensed grotesque).
   FLAG: replace with the real poster font if available. */
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

/* NOTE on the "firefly" wordmark:
   The blobby, organic lowercase wordmark is a custom/lettered logotype
   delivered as a vector asset (firefly.ai — NOT received in upload).
   It is used ONLY as a logo image (assets/logo-firefly-*.png), never
   set live in type. Do not attempt to substitute a font for it. */

:root {
  /* ---- Core palette -------------------------------------- */
  --green:        #01FF4F;   /* the spark — primary accent, signal green   */
  --green-deep:   #00C93E;   /* pressed / darker green                      */
  --magenta:      #BD01FC;   /* electric magenta — secondary brand accent   */
  --magenta-deep: #9400C9;   /* pressed magenta                             */

  --ink:          #000000;   /* true black — the default canvas             */
  --panel:        #0D0D0D;   /* raised near-black surface                   */
  --panel-2:      #161616;   /* second elevation                            */
  --hairline:     #262626;   /* borders on dark                             */
  --hairline-2:   #383838;   /* stronger border / divider                   */

  --paper:        #F2EEE4;   /* warm cream — light surfaces                 */
  --paper-2:      #E4DECF;   /* cream second tone                           */

  /* ---- Text ---------------------------------------------- */
  --fg1:          #FFFFFF;   /* primary text on dark                        */
  --fg2:          #B9B9B4;   /* secondary / caption text on dark            */
  --fg3:          #6E6E6A;   /* muted / metadata on dark                    */
  --fg-on-paper:  #0A0A0A;   /* text on cream                               */
  --fg-on-green:  #00210C;   /* text on green fills                         */

  /* ---- Sepia / film (imagery tints) ---------------------- */
  --sepia-warm:   #C9B79A;   /* warm highlight of the film photography      */
  --sepia-shadow: #2A2620;   /* warm shadow                                 */

  /* ---- Type families ------------------------------------- */
  --font-mono:      "Hasubi Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --font-condensed: "Anton", "Oswald", "Arial Narrow", sans-serif;

  /* ---- Type scale (px) ----------------------------------- */
  --t-poster:  120px;  /* hero poster numerals / dates                      */
  --t-display: 64px;   /* big statements                                    */
  --t-h1:      40px;
  --t-h2:      28px;
  --t-h3:      20px;
  --t-body:    16px;
  --t-label:   13px;   /* mono captions, the // _ taglines                  */
  --t-micro:   11px;   /* legal, ® lines                                    */

  /* ---- Spacing scale (4px base) -------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Radii --------------------------------------------- */
  --r-sm: 4px;   /* inputs, chips                                           */
  --r-md: 10px;  /* cards, buttons                                          */
  --r-lg: 18px;  /* modals, large panels                                    */
  --r-pill: 999px;

  /* ---- Borders & shadow ---------------------------------- */
  --border:      1px solid var(--hairline);
  --border-loud: 1.5px solid var(--green);
  --shadow-glow: 0 0 0 1px rgba(1,255,79,.35), 0 0 24px rgba(1,255,79,.22);
  --shadow-card: 0 8px 28px rgba(0,0,0,.55);

  /* ---- Motion -------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur:  .18s;
}

/* ============================================================
   Semantic type classes
   ============================================================ */
.fy-poster {
  font-family: var(--font-condensed);
  font-size: var(--t-poster);
  line-height: .86;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.fy-display {
  font-family: var(--font-condensed);
  font-size: var(--t-display);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.fy-h1 { font-family: var(--font-condensed); font-size: var(--t-h1); line-height: 1; text-transform: uppercase; letter-spacing:.01em; }
.fy-h2 { font-family: var(--font-mono); font-size: var(--t-h2); font-weight: 600; line-height: 1.1; }
.fy-h3 { font-family: var(--font-mono); font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }

.fy-body {
  font-family: var(--font-mono);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
}
/* The signature tagline voice: lowercase mono with // and _ markers */
.fy-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: lowercase;
}
.fy-micro {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: .02em;
}

/* Utility */
.fy-green   { color: var(--green); }
.fy-magenta { color: var(--magenta); }