/* ==========================================================================
   The Slice Club — Colors + Type Foundations
   ==========================================================================
   A neon-sign aesthetic for an American/NY-style pizza joint.
   Dark, smoky backgrounds with red/blue/yellow neon glow accents.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script:wght@600;700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ── BRAND COLORS ───────────────────────────────────────────────────── */
  --tsc-red:           #ff2a2a;   /* primary neon — CTAs, hot accents */
  --tsc-red-glow:      #ff4444;   /* used in glow shadows */
  --tsc-red-deep:      #c81a1a;   /* hovered/pressed red */

  --tsc-blue:          #4dc8ff;   /* secondary neon — info, links */
  --tsc-blue-glow:     #00aaff;   /* used in glow shadows */
  --tsc-blue-deep:     #1a8cc8;

  --tsc-yellow:        #ffd93d;   /* tertiary — pricing, ratings, deals */
  --tsc-yellow-glow:   #ffe066;

  --tsc-cream:         #f5e8d0;   /* warm off-white, used very sparingly */

  /* ── SURFACES (dark layered backgrounds) ───────────────────────────── */
  --tsc-bg:            #080808;   /* page bg / "the night" */
  --tsc-bg-2:          #0f0f12;   /* alt section bg */
  --tsc-bg-3:          #131318;   /* card surface */
  --tsc-bg-4:          #1a1a20;   /* elevated card surface */
  --tsc-bg-blackout:   #050505;   /* footer / deepest */

  /* ── FOREGROUNDS ───────────────────────────────────────────────────── */
  --tsc-fg-1:          #ffffff;             /* primary text */
  --tsc-fg-2:          rgba(255,255,255,0.65); /* body copy */
  --tsc-fg-3:          rgba(255,255,255,0.45); /* muted / desc */
  --tsc-fg-4:          rgba(255,255,255,0.25); /* labels / footnote */
  --tsc-fg-disabled:   rgba(255,255,255,0.15);

  /* ── BORDERS ───────────────────────────────────────────────────────── */
  --tsc-border-subtle:  rgba(255,255,255,0.06);
  --tsc-border-line:    rgba(255,255,255,0.10);
  --tsc-border-red:     rgba(255,42,42,0.20);
  --tsc-border-blue:    rgba(77,200,255,0.15);
  --tsc-border-yellow:  rgba(255,217,61,0.20);

  /* ── GLOWS (neon shadows) ──────────────────────────────────────────── */
  --tsc-glow-red:       0 0 12px var(--tsc-red-glow), 0 0 28px rgba(255,42,42,0.4);
  --tsc-glow-red-sm:    0 0 8px rgba(255,68,68,0.5);
  --tsc-glow-red-lg:    0 0 24px rgba(255,42,42,0.6), 0 0 56px rgba(255,42,42,0.25);
  --tsc-glow-blue:      0 0 12px var(--tsc-blue-glow), 0 0 28px rgba(0,170,255,0.4);
  --tsc-glow-blue-sm:   0 0 8px rgba(0,170,255,0.5);
  --tsc-glow-blue-lg:   0 0 24px rgba(77,200,255,0.55), 0 0 48px rgba(77,200,255,0.25);
  --tsc-glow-yellow:    0 0 12px rgba(255,217,61,0.5), 0 0 28px rgba(255,217,61,0.25);

  /* ── ELEVATION (non-neon, dark room shadow) ────────────────────────── */
  --tsc-shadow-card:    0 12px 40px rgba(0,0,0,0.4);
  --tsc-shadow-pop:     0 20px 60px rgba(0,0,0,0.55);

  /* ── RADII ─────────────────────────────────────────────────────────── */
  --tsc-radius-sm:      2px;   /* buttons, chips, inputs */
  --tsc-radius-md:      4px;   /* cards, panels */
  --tsc-radius-pill:    999px; /* avatar / circular */

  /* ── SPACING (8-pt soft scale) ─────────────────────────────────────── */
  --tsc-space-1:   4px;
  --tsc-space-2:   8px;
  --tsc-space-3:  12px;
  --tsc-space-4:  16px;
  --tsc-space-5:  24px;
  --tsc-space-6:  32px;
  --tsc-space-7:  48px;
  --tsc-space-8:  72px;
  --tsc-space-9: 100px;

  /* ── TYPE FAMILIES ─────────────────────────────────────────────────── */
  --tsc-font-display: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
  --tsc-font-script:  'Dancing Script', 'Pacifico', cursive;
  --tsc-font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --tsc-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── TRACKING (letter-spacing) — display type lives on tracking ────── */
  --tsc-track-tight:   0.05em;   /* big titles */
  --tsc-track-default: 0.1em;
  --tsc-track-wide:    0.15em;   /* nav, labels */
  --tsc-track-wider:   0.2em;    /* buttons */
  --tsc-track-widest:  0.4em;    /* tiny eyebrow labels */

  /* ── MOTION ────────────────────────────────────────────────────────── */
  --tsc-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --tsc-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --tsc-dur-fast:    150ms;
  --tsc-dur-base:    250ms;
  --tsc-dur-slow:    400ms;
}

/* ==========================================================================
   Semantic type roles
   Display sizes assume a dark surface — text-shadow glow only on accents,
   not on every heading (preserves readability of long lines).
   ========================================================================== */

.tsc-eyebrow,
.tsc-section-label {
  font-family: var(--tsc-font-display);
  font-size: 0.8rem;
  letter-spacing: var(--tsc-track-widest);
  color: var(--tsc-red);
  text-shadow: 0 0 10px var(--tsc-red-glow);
  text-transform: uppercase;
  margin: 0 0 var(--tsc-space-3);
}

.tsc-h1,
h1.tsc {
  font-family: var(--tsc-font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: var(--tsc-track-tight);
  color: var(--tsc-fg-1);
  margin: 0 0 var(--tsc-space-5);
  text-transform: uppercase;
}

.tsc-h2,
h2.tsc {
  font-family: var(--tsc-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: var(--tsc-track-tight);
  color: var(--tsc-fg-1);
  margin: 0 0 var(--tsc-space-5);
  text-transform: uppercase;
}

.tsc-h3,
h3.tsc {
  font-family: var(--tsc-font-display);
  font-size: 1.5rem;
  letter-spacing: var(--tsc-track-wide);
  color: var(--tsc-fg-1);
  margin: 0 0 var(--tsc-space-5);
  text-transform: uppercase;
}

.tsc-tagline,
.tsc-script {
  font-family: var(--tsc-font-script);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--tsc-fg-1);
  font-style: normal;
}

.tsc-body,
p.tsc {
  font-family: var(--tsc-font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--tsc-fg-2);
  margin: 0 0 var(--tsc-space-4);
}

.tsc-small {
  font-family: var(--tsc-font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--tsc-fg-3);
}

.tsc-label {
  font-family: var(--tsc-font-display);
  font-size: 0.85rem;
  letter-spacing: var(--tsc-track-wider);
  color: var(--tsc-fg-3);
  text-transform: uppercase;
}

.tsc-stat {
  font-family: var(--tsc-font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--tsc-yellow);
  text-shadow: var(--tsc-glow-yellow);
}

/* ── glow utility classes (apply to a span inside a heading) ──────────── */
.tsc-glow-red    { color: var(--tsc-red);    text-shadow: 0 0 20px rgba(255,42,42,0.7); }
.tsc-glow-blue   { color: var(--tsc-blue);   text-shadow: 0 0 20px rgba(77,200,255,0.7); }
.tsc-glow-yellow { color: var(--tsc-yellow); text-shadow: 0 0 20px rgba(255,217,61,0.7); }

/* ── noise overlay — call .tsc-noise on the page <body> ───────────────── */
.tsc-noise::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── scanlines overlay — apply to a hero/background element ───────────── */
.tsc-scanlines {
  position: relative;
  isolation: isolate;
}
.tsc-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0,0,0,0.15) 2px,
    rgba(0,0,0,0.15) 4px
  );
}

/* ── neon divider — a horizontal lit ribbon between sections ──────────── */
.tsc-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tsc-red), var(--tsc-yellow), var(--tsc-red), transparent);
  box-shadow: var(--tsc-glow-red);
  margin: 0;
}
.tsc-divider--blue {
  background: linear-gradient(90deg, transparent, var(--tsc-blue), var(--tsc-blue-glow), var(--tsc-blue), transparent);
  box-shadow: var(--tsc-glow-blue);
}