/* ──────────────────────────────────────────────────────────────────────────
   Showgaze Design System — Colors + Typography
   Source of truth for tokens. Import this in any production code or HTML mock.

   @import url('./colors_and_type.css');

   Two layers:
   1. Base tokens   (--sg-*)        — palette + scale primitives.
   2. Semantic vars (--fg, --bg, h1, etc) — what to actually use in components.
   ────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

:root {
  /* ── PALETTE ──────────────────────────────────────────────────────────── */
  --sg-near-black:  #0B0C0E;
  --sg-charcoal:    #191A1D;
  --sg-graphite:    #2B2C2F;
  --sg-border:      #1F2024;
  --sg-border-hi:   #33353A;

  --sg-bone:        #E6DCCB;
  --sg-grey:        #8A8A86;
  --sg-grey-mute:   #52524F;

  --sg-cyan:        #59A3B3;
  --sg-cyan-hi:     #7EBFCD;
  --sg-cyan-lo:     rgba(89, 163, 179, 0.10);

  --sg-brass:       #B9A37E;
  --sg-brass-lo:    rgba(185, 163, 126, 0.12);

  --sg-ok:          #6FB89B;
  --sg-ok-lo:       rgba(111, 184, 155, 0.10);
  --sg-warn:        #C9A65A;
  --sg-warn-lo:     rgba(201, 166, 90, 0.10);
  --sg-fail:        #B25555;
  --sg-fail-lo:     rgba(178, 85, 85, 0.10);

  /* ── TYPOGRAPHY families ─────────────────────────────────────────────── */
  --sg-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sg-font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --sg-font-mono:    'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ── TYPE SCALE (px) ─────────────────────────────────────────────────── */
  --sg-fs-display: 56px;   /* hero only, Fan App splash */
  --sg-fs-h1:      32px;
  --sg-fs-h2:      22px;
  --sg-fs-h3:      17px;
  --sg-fs-body:    15px;   /* Fan App body */
  --sg-fs-body-sm: 13px;   /* Console body */
  --sg-fs-meta:    11px;   /* metadata */
  --sg-fs-label:   9px;    /* mono labels */
  --sg-fs-kicker:  8px;    /* uppercase kickers */

  /* ── LINE HEIGHTS ────────────────────────────────────────────────────── */
  --sg-lh-tight:   1.15;
  --sg-lh-snug:    1.35;
  --sg-lh-normal:  1.5;
  --sg-lh-loose:   1.65;

  /* ── TRACKING ────────────────────────────────────────────────────────── */
  --sg-tr-display: 0.005em;
  --sg-tr-heading: 0.01em;
  --sg-tr-body:    0;
  --sg-tr-mono:    0.02em;
  --sg-tr-label:   0.16em;
  --sg-tr-kicker:  0.22em;

  /* ── SPACING (4px grid) ──────────────────────────────────────────────── */
  --sg-s-1:  4px;
  --sg-s-2:  8px;
  --sg-s-3:  12px;
  --sg-s-4:  16px;
  --sg-s-5:  24px;
  --sg-s-6:  32px;
  --sg-s-7:  48px;
  --sg-s-8:  64px;

  /* ── RADII ───────────────────────────────────────────────────────────── */
  --sg-r-0:    0;
  --sg-r-1:    2px;
  --sg-r-2:    4px;
  --sg-r-3:    8px;
  --sg-r-4:    12px;
  --sg-r-pill: 999px;

  /* ── SHADOW (used sparingly, Fan App modals only) ────────────────────── */
  --sg-shadow-card:  0 8px 24px rgba(0, 0, 0, 0.32);
  --sg-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* ── MOTION ──────────────────────────────────────────────────────────── */
  --sg-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --sg-dur-fast:    140ms;
  --sg-dur-normal:  220ms;
  --sg-dur-slow:    420ms;

  /* ── SEMANTIC TOKENS ─────────────────────────────────────────────────── */
  --bg:        var(--sg-near-black);
  --bg-1:      var(--sg-charcoal);
  --bg-2:      var(--sg-graphite);
  --fg:        var(--sg-bone);
  --fg-2:      var(--sg-grey);
  --fg-3:      var(--sg-grey-mute);
  --border:    var(--sg-border);
  --border-hi: var(--sg-border-hi);
  --accent:    var(--sg-cyan);
  --accent-hi: var(--sg-cyan-hi);
  --accent-lo: var(--sg-cyan-lo);
}

/* ──────────────────────────────────────────────────────────────────────────
   SEMANTIC TYPE CLASSES
   Use these on elements rather than restyling raw tags. Compose with margins
   from the spacing scale.
   ────────────────────────────────────────────────────────────────────────── */

.sg-display {
  font-family: var(--sg-font-display);
  font-weight: 600;
  font-size: var(--sg-fs-display);
  line-height: var(--sg-lh-tight);
  letter-spacing: var(--sg-tr-display);
  color: var(--fg);
}

.sg-h1 {
  font-family: var(--sg-font-display);
  font-weight: 600;
  font-size: var(--sg-fs-h1);
  line-height: var(--sg-lh-tight);
  letter-spacing: var(--sg-tr-heading);
  color: var(--fg);
}

.sg-h2 {
  font-family: var(--sg-font-display);
  font-weight: 600;
  font-size: var(--sg-fs-h2);
  line-height: var(--sg-lh-snug);
  letter-spacing: var(--sg-tr-heading);
  color: var(--fg);
}

.sg-h3 {
  font-family: var(--sg-font-sans);
  font-weight: 600;
  font-size: var(--sg-fs-h3);
  line-height: var(--sg-lh-snug);
  color: var(--fg);
}

.sg-body {
  font-family: var(--sg-font-sans);
  font-weight: 400;
  font-size: var(--sg-fs-body);
  line-height: var(--sg-lh-normal);
  color: var(--fg);
}

.sg-body-sm {
  font-family: var(--sg-font-sans);
  font-weight: 400;
  font-size: var(--sg-fs-body-sm);
  line-height: var(--sg-lh-normal);
  color: var(--fg);
}

.sg-meta {
  font-family: var(--sg-font-mono);
  font-weight: 400;
  font-size: var(--sg-fs-meta);
  line-height: var(--sg-lh-normal);
  letter-spacing: var(--sg-tr-mono);
  color: var(--fg-2);
}

.sg-label {
  font-family: var(--sg-font-mono);
  font-weight: 500;
  font-size: var(--sg-fs-label);
  line-height: 1;
  letter-spacing: var(--sg-tr-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.sg-kicker {
  font-family: var(--sg-font-mono);
  font-weight: 500;
  font-size: var(--sg-fs-kicker);
  line-height: 1;
  letter-spacing: var(--sg-tr-kicker);
  text-transform: uppercase;
  color: var(--accent);
}

.sg-mono {
  font-family: var(--sg-font-mono);
  letter-spacing: var(--sg-tr-mono);
}

/* ──────────────────────────────────────────────────────────────────────────
   BASE RESET (opt-in: add class="sg-base" to <body> or a wrapper)
   ────────────────────────────────────────────────────────────────────────── */
.sg-base {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sg-font-sans);
  font-size: var(--sg-fs-body-sm);
  line-height: var(--sg-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sg-base *,
.sg-base *::before,
.sg-base *::after { box-sizing: border-box; }

/* Subtle film-grain overlay — paint on body via ::after if desired */
.sg-grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}