/* ============================================================
   GSC LOUD — Website dummy · self-contained design tokens
   Copied from the GSC design system so this folder deploys
   standalone (Cloudflare Pages / Vercel / local) with NO
   external path dependencies. Pair with site.css.
   ============================================================ */

/* ============================================================
   GSC LOUD — "Die Große Nacht" (Direction 02, final)
   ------------------------------------------------------------
   The loud, bold, poster-grade sibling CI of Great Supper Club.
   Ground: Cloud-Dancer white (Pantone COY 2026). Ink black type
   set in Anton. Signals: Hydrant red + Taxi yellow. Motif:
   diagonal awning stripes + checker bands + the Asterisk*.
   All tokens namespaced --loud-* so they coexist with V1.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Grounds ---- */
  --loud-cloud:  #F7F6F2;  /* PRIMARY ground — Cloud Dancer white */
  --loud-cream:  #F2ECDD;  /* warm paper, secondary ground */
  --loud-ink:    #141114;  /* near-black — type & night ground */
  --loud-silver: #D8D2C2;  /* hairlines on cloud */
  --loud-smoke:  #5A5447;  /* muted text */
  --loud-fog:    #8A8273;  /* faint text / labels */

  /* ---- Signals ---- */
  --loud-red:        #D9241B;  /* HYDRANT — primary signal */
  --loud-red-deep:   #A81B14;  /* hover / pressed */
  --loud-yellow:     #FFC60A;  /* TAXI — secondary signal */
  --loud-yellow-deep:#E0AC00;  /* hover / pressed */

  /* ---- Semantic ---- */
  --loud-surface-stage: var(--loud-cloud);   /* default page */
  --loud-surface-night: var(--loud-ink);     /* inverted band */
  --loud-text:          var(--loud-ink);
  --loud-text-muted:    var(--loud-smoke);
  --loud-text-on-night: var(--loud-cloud);
  --loud-accent:        var(--loud-red);
  --loud-accent-2:      var(--loud-yellow);
  --loud-line:          var(--loud-silver);

  /* ---- Type ---- */
  --loud-font-display: 'Anton', 'Archivo', sans-serif;            /* @kind other */
  --loud-font-sans:    'Archivo', 'Helvetica Neue', sans-serif;   /* @kind other */
  --loud-font-mono:    'Space Mono', 'Courier New', monospace;    /* @kind other */

  --loud-text-mega:    clamp(5rem, 13vw, 15rem);   /* @kind other */
  --loud-text-display: clamp(3.5rem, 8vw, 8rem);   /* @kind other */
  --loud-text-h1:      clamp(2.6rem, 5vw, 4.5rem); /* @kind other */
  --loud-text-h2:      2.25rem;    /* @kind other */
  --loud-text-h3:      1.5rem;     /* @kind other */
  --loud-text-body:    1.0625rem;  /* @kind other */
  --loud-text-label:   0.8125rem;  /* @kind other */
  --loud-text-micro:   0.6875rem;  /* @kind other */

  --loud-lh-display: 0.85;   /* @kind other */
  --loud-lh-body:    1.45;  /* @kind other */
  --loud-ls-label:   0.14em; /* @kind other */

  /* ---- Shape & borders ---- */
  --loud-radius:      0;      /* @kind spacing */
  --loud-radius-soft: 6px;    /* @kind spacing */
  --loud-radius-pill: 999px;  /* @kind spacing */
  --loud-border:      3px;    /* @kind spacing */
  --loud-border-hair: 1px;    /* @kind spacing */

  /* ---- Effects ---- */
  --loud-shadow-hard: 5px 5px 0 var(--loud-ink);             /* @kind shadow */
  --loud-shadow-soft: 0 10px 30px rgba(20, 17, 20, 0.14);    /* @kind shadow */

  /* ---- Motion: snappy, mechanical ---- */
  --loud-ease:     cubic-bezier(0.7, 0, 0.2, 1);  /* @kind other */
  --loud-dur-fast: 120ms;  /* @kind other */
  --loud-dur-base: 200ms;  /* @kind other */
  --loud-ticker:   18s;    /* @kind other */
}

/* ---- Motif helpers ---- */

/* Diagonal awning stripes (the element from proposal C) */
.loud-stripes {
  height: 26px;
  background: repeating-linear-gradient(
    115deg,
    var(--loud-red) 0 34px,
    var(--loud-cloud) 34px 58px
  );
}
.loud-stripes--yellow {
  background: repeating-linear-gradient(
    115deg,
    var(--loud-yellow) 0 34px,
    var(--loud-ink) 34px 58px
  );
}
.loud-stripes--ink {
  background: repeating-linear-gradient(
    115deg,
    var(--loud-ink) 0 34px,
    var(--loud-cloud) 34px 58px
  );
}

/* Taxi checker band (from proposal A) */
.loud-checker {
  height: 26px;
  background:
    repeating-linear-gradient(90deg, var(--loud-ink) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(90deg, var(--loud-yellow) 0 52px, var(--loud-yellow) 52px 104px);
  background-color: var(--loud-yellow);
}

/* Mono label — the tracked-out uppercase data voice */
.loud-label {
  font-family: var(--loud-font-mono);
  font-size: var(--loud-text-label);
  letter-spacing: var(--loud-ls-label);
  text-transform: uppercase;
}

/* Marquee keyframes for tickers */
@keyframes loud-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}