/* ============================================================
   Vintage Modern Baseball Glassmorphism — Design System Tokens
   ============================================================
   Cream paper, navy ink, frosted glass surfaces, hard offset
   shadows, zero gradients.  Every visual primitive lives here
   as a CSS custom property so Svelte components and plain
   templates can share one source of truth.
   ============================================================ */

:root {
  /* ── Colors: Paper ────────────────────────────────────────── */
  --g-paper:        #F1E3C8;
  --g-paper-2:      #E6D4B0;
  --g-paper-dark:   #D9C293;
  --g-btn-ink:      #FCF6E4;

  /* ── Colors: Ink ──────────────────────────────────────────── */
  --g-ink:          #14233F;
  --g-ink-soft:     #2A3556;

  /* ── Colors: Red accent ───────────────────────────────────── */
  --g-red:          #B8253B;
  --g-red-deep:     #8E1C2E;

  /* ── Colors: Tier badges ──────────────────────────────────── */
  --g-forest:       #2C5E3A;
  --g-high:         #2C5E3A;
  --g-mustard:      #B88732;
  --g-med:          #B88732;
  --g-slate:        #5A6477;
  --g-low:          #5A6477;
  --g-stone:        #8A7E6A;
  --g-skip:         #8A7E6A;

  /* ── Colors: Text ─────────────────────────────────────────── */
  --g-text:         var(--g-ink);
  --g-text-muted:   #4D4A3D;
  --g-text-dim:     #7A705A;

  /* ── Colors: On-glass overrides ───────────────────────────── */
  --g-on-glass:      var(--g-ink);
  --g-on-glass-soft: var(--g-ink-soft);

  /* ── Colors: Divider ──────────────────────────────────────── */
  --g-divider:      rgba(20, 35, 63, 0.18);

  /* ── Typography ───────────────────────────────────────────── */
  --g-display:      'Big Shoulders Display', 'Oswald', sans-serif;
  --g-sans:         'Inter', system-ui, sans-serif;
  --g-mono:         'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ── Glass surfaces ───────────────────────────────────────── */
  --g-glass-bg:      rgba(252, 245, 228, 0.62);
  --g-glass-bg-hi:   rgba(252, 245, 228, 0.80);
  --g-glass-bord:    rgba(20, 35, 63, 0.22);
  --g-glass-bord-hi: rgba(20, 35, 63, 0.36);
  --g-glass-blur:    blur(14px) saturate(110%);
  --g-shadow:        0 3px 0 rgba(20, 35, 63, .05),
                     0 8px 24px rgba(20, 35, 63, .10),
                     0 1px 0 rgba(255, 255, 255, .55) inset;

  /* ── Chips ────────────────────────────────────────────────── */
  --g-chip-bg:      rgba(252, 245, 228, 0.45);
  --g-chip-bord:    rgba(20, 35, 63, 0.14);

  /* ── Spacing scale ────────────────────────────────────────── */
  --g-sp-2xs:       4px;
  --g-sp-xs:        8px;
  --g-sp-sm:        12px;
  --g-sp-card:      14px;
  --g-sp-md:        18px;
  --g-sp-lg:        22px;
  --g-sp-page:      26px;
  --g-sp-xl:        30px;
  --g-sp-2xl:       56px;

  /* ── Hard offset shadows ──────────────────────────────────── */
  --g-hard-offset:      3px 3px 0 var(--g-ink);
  --g-hard-offset-lg:   4px 4px 0 var(--g-ink);
  --g-hard-offset-red:  3px 3px 0 var(--g-red);
  --g-orb-shadow:       2px 2px 0 rgba(20, 35, 63, .18);
}


/* ============================================================
   Utility Classes
   ============================================================ */

/* ── Standard glass card ────────────────────────────────────── */
.g-glass {
  background:      var(--g-glass-bg);
  backdrop-filter:  var(--g-glass-blur);
  -webkit-backdrop-filter: var(--g-glass-blur);
  border:          1px solid var(--g-glass-bord);
  border-radius:   6px;
  box-shadow:      var(--g-shadow);
}

/* ── Stronger glass (modals, popovers, hero cards) ──────────── */
.g-glass-strong {
  background:      var(--g-glass-bg-hi);
  backdrop-filter:  var(--g-glass-blur);
  -webkit-backdrop-filter: var(--g-glass-blur);
  border:          1px solid var(--g-glass-bord-hi);
  border-radius:   6px;
  box-shadow:      var(--g-shadow);
}

/* ── Tier glow rings ────────────────────────────────────────── */
.g-glow-high {
  box-shadow: 0 0 0 2px var(--g-high),
              0 0 12px rgba(44, 94, 58, 0.25);
}

.g-glow-med {
  box-shadow: 0 0 0 2px var(--g-med),
              0 0 12px rgba(184, 135, 50, 0.25);
}

.g-glow-low {
  box-shadow: 0 0 0 2px var(--g-low),
              0 0 12px rgba(90, 100, 119, 0.25);
}

.g-glow-skip {
  box-shadow: 0 0 0 2px var(--g-skip),
              0 0 12px rgba(138, 126, 106, 0.25);
}

/* ── Table utilities ────────────────────────────────────────── */
.col-date {
  font-family: var(--g-mono);
  font-size: 13px;
  font-weight: 500;
  width: 72px;
  min-width: 72px;
  white-space: nowrap;
}

/* ── Aurora background ──────────────────────────────────────── *
   Three-layer texture: halftone dots, diagonal pinstripes,
   paper grain.  All generated via inline SVG data URIs so
   there are zero external asset dependencies.
   ──────────────────────────────────────────────────────────── */
.g-aurora {
  background-color: var(--g-paper);
  background-image:
    /* Layer 1 — halftone dots (4 px diameter, 12 px grid) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='1.2' fill='%2314233F' fill-opacity='0.04'/%3E%3C/svg%3E"),
    /* Layer 2 — diagonal pinstripes (45 deg, 1 px stroke) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4' stroke='%2314233F' stroke-opacity='0.03' stroke-width='0.75'/%3E%3C/svg%3E"),
    /* Layer 3 — paper grain (noise approximation via tiny rects) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='0' y='0' width='1' height='1' fill='%2314233F' fill-opacity='0.015'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%2314233F' fill-opacity='0.02'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%2314233F' fill-opacity='0.012'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%2314233F' fill-opacity='0.018'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%2314233F' fill-opacity='0.014'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 12px 12px, 8px 8px, 6px 6px;
}


/* ============================================================
   Shared Svelte Component Utilities
   ============================================================
   g- prefixed to avoid collisions with legacy style.css classes.
   ============================================================ */

/* ── Stat strip ─────────────────────────────────────────────── */
.g-stat-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 0;
}

.g-stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.g-stat-value {
  font-family: var(--g-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: var(--g-ink);
  letter-spacing: -0.01em;
}

.g-stat-label {
  font-family: var(--g-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--g-text-dim);
  margin-top: 4px;
}

.g-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--g-divider);
  flex-shrink: 0;
}

/* ── Panel ──────────────────────────────────────────────────── */
.g-panel          { padding: 20px 24px; }
.g-panel-header   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.g-section-title  { font-family: var(--g-display); font-weight: 800; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--g-ink); margin: 0; }
.g-panel-meta     { font-family: var(--g-sans); font-size: 13px; color: var(--g-text-muted); }
.g-section-divider { height: 1px; background: var(--g-divider); margin-bottom: 14px; }

/* ── Date links ─────────────────────────────────────────────── */
.g-date-link       { color: var(--g-ink); text-decoration: none; font-family: var(--g-mono); font-size: 13px; font-weight: 500; }
.g-date-link:hover { color: var(--g-red); text-decoration: underline; }

/* ── Result badges ──────────────────────────────────────────── */
.g-result-badge { display: inline-block; font-family: var(--g-display); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; padding: 2px 8px; border-radius: 3px; }
.g-result-w     { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.g-result-l     { background: rgba(184, 37, 59, 0.10); color: #b8253b; }
.g-result-p     { background: rgba(20, 35, 63, 0.08); color: var(--g-text-muted); }

/* ── Day pills ──────────────────────────────────────────────── */
.g-day-pill      { display: inline-block; font-family: var(--g-display); font-weight: 800; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; }
.g-day-pill-hot  { background: rgba(44, 94, 58, 0.14); color: var(--g-high); border: 1px solid rgba(44, 94, 58, 0.3); }
.g-day-pill-cold { background: rgba(184, 37, 59, 0.12); color: var(--g-red); border: 1px solid rgba(184, 37, 59, 0.25); }
.g-day-pill-push { background: rgba(20, 35, 63, 0.06); color: var(--g-text-dim); border: 1px solid var(--g-divider); }

/* ── Responsive overrides ───────────────────────────────────── */
@media (max-width: 640px) {
  .g-stat-block   { padding: 0 12px; }
  .g-stat-value   { font-size: 22px; }
  .g-stat-divider { height: 24px; }
  .g-panel        { padding: 16px; }
}