/* ==========================================================================
   Ticket Timeline — Colors & Type
   Sourced from lib/theme.dart (DarkModeColors, LightModeColors, AppColors,
   FontSizes, AppSpacing, AppRadius, AppButtonTokens, FrostedGlassStyle).
   The app ships dark-mode by default; light mode exists but is secondary.
   ========================================================================== */

/* -------- Fonts --------
   App UI: Roboto Flex — variable font, bundled (axes: wght 100–900, opsz 8–144, + GRAD/XOPQ/XTRA/YOPQ/YTAS/YTDE/YTFI/YTLC/YTUC/slnt/wdth).
   Display / App Store marketing: Bebas Neue Regular, bundled.
   Optional novelty: 14-segment-led + Doto (scoreboard/score displays). */

@font-face {
  font-family: "BebasNeue";
  src: url("./fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Roboto Flex is loaded via Google Fonts <link> in the HTML head — local
   @font-face removed because the variable-font file is not bundled. */

:root {
  /* ---------- Brand ---------- */
  --tt-brand-blue: #1d8eff;          /* darkPrimary — primary accent */
  --tt-brand-blue-bright: #00aeef;   /* lightPrimary — marketing bright */
  --tt-brand-blue-deep: #0068d0;     /* chart bar bottom / gradient deep */
  --tt-brand-blue-mid: #0075e9;
  --tt-brand-blue-hi: #0381ff;

  /* ---------- Surfaces (dark, canonical) ---------- */
  /* ---------- Surfaces (dark, canonical) ----------
     App background uses a layered "Architectural Darkness" stack — base #0B0B0D
     plus a linear gradient #131418 → #0B0B0D → #08080A. Use --tt-bg-base for
     the bottommost solid fill, --tt-bg-top/--tt-bg-mid/--tt-bg-deep for the
     linear stops, and --tt-bg as the legacy single-value pointer (== base). */
  --tt-bg: #0B0B0D;                  /* scaffold (single-value alias) */
  --tt-bg-base: #0B0B0D;             /* solid base layer */
  --tt-bg-top: #131418;              /* atmosphere gradient top */
  --tt-bg-mid: #0B0B0D;              /* atmosphere gradient middle */
  --tt-bg-deep: #08080A;             /* atmosphere gradient bottom */
  --tt-surface: #1c1c1e;             /* legacy flat card (rarely used now) */
  --tt-surface-elevated: #2c2c2e;    /* legacy elevated card (now superseded by shell gradients) */
  --tt-surface-variant: #44474e;     /* input fill */
  --tt-surface-input: #1a1a1c;

  /* ---------- Foreground on dark ---------- */
  --tt-fg: #e2e8f0;                  /* darkOnSurface — primary text */
  --tt-fg-muted: #c4c7cf;            /* darkOnSurfaceVariant */
  --tt-fg-dim: #8e9099;              /* darkOutline (also used as tertiary text) */
  --tt-fg-faint: rgba(226, 232, 240, 0.45);
  --tt-on-primary: #1a3a52;          /* darkOnPrimary (text on blue fills) */
  --tt-on-primary-contrast: #ffffff; /* for strong filled blue pills */

  /* ---------- Semantic ---------- */
  --tt-success: #22c55e;             /* importSelectedBadgeFill (dark) */
  --tt-success-dim: #16a34a;
  --tt-on-success: #0b1220;
  --tt-warning: #efb21e;             /* teamBadgeGold */
  --tt-gold: #efb21e;                /* teamBadgeGold (awards) */
  --tt-star: #f5c563;                /* favoriteStarBase */
  --tt-danger: #e53935;              /* destructive */

  /* Historic — yellow-gold (current; was copper #CB8342, reverted) */
  --tt-historic: #D4AF37;            /* border AND foreground (same color) */
  --tt-historic-fg: #D4AF37;
  --tt-historic-chip-bg: rgba(212, 175, 55, 0.14);  /* 0x24D4AF37 */
  --tt-historic-detail-bg: rgba(212, 175, 55, 0.10);
  --tt-historic-body: #E7E9EE;
  --tt-historic-icon: 'newspaper.svg';

  /* Milestone — warm grey sibling of Historic */
  --tt-milestone: #B8B0A4;
  --tt-milestone-fg: #E4DED4;
  --tt-milestone-chip-bg: rgba(184, 176, 164, 0.16);
  --tt-milestone-icon: 'medal.svg';

  /* WhatHappenedStackedHeroStyle accents (used by "notable moment" hero cards) */
  --tt-hero-historic-accent: #D4AF37;
  --tt-hero-milestone-accent: #B8B0A4;
  --tt-hero-sapphire-accent: #4C7DFF;

  /* Top Games — Sapphire (tiered rarity rank scale) */
  --tt-sapphire: #4C7DFF;
  --tt-sapphire-t5-bg: rgba(76, 125, 255, 0.24);
  --tt-sapphire-t5-border: #6A92FF;
  --tt-sapphire-t5-fg: #FFFFFF;
  --tt-sapphire-t5-glow: rgba(76, 125, 255, 0.35);
  --tt-sapphire-t10-bg: rgba(76, 125, 255, 0.18);
  --tt-sapphire-t10-border: #4C7DFF;
  --tt-sapphire-t10-fg: #D6E2FF;
  --tt-sapphire-t25-bg: rgba(76, 125, 255, 0.12);
  --tt-sapphire-t25-border: rgba(76, 125, 255, 0.50);
  --tt-sapphire-t25-fg: #B8CCFF;
  --tt-sapphire-t50-bg: rgba(76, 125, 255, 0.08);
  --tt-sapphire-t50-border: rgba(76, 125, 255, 0.35);
  --tt-sapphire-t50-fg: #9FB7FF;
  --tt-sapphire-t100-bg: rgba(76, 125, 255, 0.06);
  --tt-sapphire-t100-border: rgba(76, 125, 255, 0.28);
  --tt-sapphire-t100-fg: #8FAAFF;
  --tt-sapphire-detail-bg: rgba(76, 125, 255, 0.08);
  --tt-sapphire-detail-border: #4C7DFF;
  --tt-sapphire-detail-title: #DCE6FF;
  --tt-sapphire-detail-body: #A9BFFF;

  /* ---------- Insight card shells (MlbInsightShellDecorations) ----------
     Each shell is a topLeft→bottomRight linear gradient + 1px border +
     0 4 16 rgba(0,0,0,.25) shadow + 8px radius. The mlbTeams shell is also
     the default for compact timeline event cards, add-game rows, import
     preview cards, profile sections, and date strips. */
  --tt-shell-teams-a: #232A33;
  --tt-shell-teams-b: #1E2228;
  --tt-shell-teams-border: #2E3742;
  --tt-shell-players-a: #1B2430;
  --tt-shell-players-b: #222F3E;
  --tt-shell-players-border: #2F3D4F;
  --tt-shell-stats-a: #2E2A28;
  --tt-shell-stats-b: #262323;
  --tt-shell-stats-border: #3A3431;
  --tt-shell-hof-a: #2A2F3A;
  --tt-shell-hof-b: #22252E;
  --tt-shell-hof-border: #343A48;
  --tt-shell-awards-a: #3A3A3C;
  --tt-shell-awards-b: #2C2C2E;
  --tt-shell-awards-border: #48484A;
  --tt-shell-gold-gloves-a: #2A2415;
  --tt-shell-gold-gloves-b: #1E2228;
  --tt-shell-gold-gloves-border: #5A4A1F;
  --tt-shell-silver-sluggers-a: #222629;
  --tt-shell-silver-sluggers-b: #1E2228;
  --tt-shell-silver-sluggers-border: #3A4046;
  --tt-shell-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

  --tt-on-danger: #ffffff;
  --tt-danger-container: #5c1a1a;

  /* ---------- Chart / team accents ---------- */
  --tt-teams-1: #0068d0;
  --tt-teams-2: #0075e9;
  --tt-teams-3: #0381ff;
  --tt-teams-4: #1d8eff;
  --tt-chart-bar-top: #1d8eff;
  --tt-chart-bar-bottom: #0068d0;
  --tt-map-marker-fill: #101a2b;
  --tt-map-marker-ring: #e6eaf2;

  /* ---------- Outlines & dividers ---------- */
  --tt-outline: rgba(142, 144, 153, 0.24);   /* card border */
  --tt-outline-strong: rgba(142, 144, 153, 0.50);
  --tt-divider: rgba(255, 255, 255, 0.06);

  /* ---------- Ambient tab tints (AppAtmosphereTone) ---------- */
  --tt-ambient-timeline: #4b64b8;
  --tt-ambient-insights: #358799;
  --tt-ambient-profile:  #9e7038;
  --tt-ambient-discover: #6c5dd3;
  /* Per-tab light-angle (radial wash rotation, in turns; see AppAtmosphereTone.lightAngleTurns) */
  --tt-ambient-timeline-angle: 0.055turn;
  --tt-ambient-insights-angle: 0.04turn;
  --tt-ambient-profile-angle: -0.03turn;
  --tt-ambient-discover-angle: 0turn;

  /* ---------- Radii (flat 8px system in app) ---------- */
  --tt-radius-sm: 8px;
  --tt-radius-md: 8px;
  --tt-radius-lg: 8px;
  --tt-radius-pill: 999px;
  --tt-radius-compact-meta-chip: 4px;  /* AppRadius.compactMetaChip — micro-chips on compact timeline rows */

  /* ---------- Spacing scale ---------- */
  --tt-space-xs: 4px;
  --tt-space-sm: 8px;
  --tt-space-md: 16px;
  --tt-space-lg: 24px;
  --tt-space-xl: 32px;
  --tt-space-xxl: 48px;

  /* ---------- Elevation / shadows ---------- */
  --tt-shadow-card:
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.15);
  --tt-shadow-button: 0 2px 12px rgba(0, 0, 0, 0.30);
  --tt-shadow-fab: 0 4px 16px rgba(0, 0, 0, 0.35);
  --tt-shadow-glow-primary: 0 0 48px rgba(29, 142, 255, 0.22);

  /* ---------- Button tokens ---------- */
  --tt-btn-h: 48px;
  --tt-btn-h-compact: 36px;
  --tt-btn-h-icon: 44px;
  --tt-btn-pad-x: 20px;
  --tt-btn-pad-x-compact: 12px;
  --tt-btn-press-scale: 0.98;
  --tt-btn-press-opacity: 0.95;
  --tt-btn-anim: 100ms ease-out;

  /* ---------- Type: families ---------- */
  --tt-font-ui: "Roboto Flex", "Inter", -apple-system, BlinkMacSystemFont,
                "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --tt-font-display: "BebasNeue", "Bebas Neue", Impact, "Arial Narrow Bold",
                     sans-serif;
  --tt-font-scoreboard: "14-segment-led", "Doto", ui-monospace, monospace;

  /* ---------- Type: sizes (Material3 scale from FontSizes) ---------- */
  --tt-fs-display-lg: 57px;
  --tt-fs-display-md: 45px;
  --tt-fs-display-sm: 36px;
  --tt-fs-headline-lg: 32px;
  --tt-fs-headline-md: 28px;
  --tt-fs-headline-sm: 24px;
  --tt-fs-title-lg: 22px;
  --tt-fs-title-md: 16px;
  --tt-fs-title-sm: 14px;
  --tt-fs-label-lg: 14px;
  --tt-fs-label-md: 12px;
  --tt-fs-label-sm: 11px;
  --tt-fs-body-lg: 16px;
  --tt-fs-body-md: 14px;
  --tt-fs-body-sm: 12px;

  /* ---------- Type: weights ---------- */
  --tt-fw-light: 300;
  --tt-fw-regular: 400;
  --tt-fw-medium: 500;
  --tt-fw-semibold: 600;
  --tt-fw-bold: 700;
}

/* Light-mode token overrides (app supports it, but ships dark). */
@media (prefers-color-scheme: light) {
  :root[data-tt-theme="auto"] {
    --tt-bg: #fbfcfd;
    --tt-surface: #ffffff;
    --tt-surface-elevated: #ffffff;
    --tt-surface-variant: #e2e8f0;
    --tt-fg: #1a1c1e;
    --tt-fg-muted: #44474e;
    --tt-fg-dim: #74777f;
    --tt-on-primary: #ffffff;
  }
}

/* ==========================================================================
   Semantic type — matches Material3 text theme in theme.dart
   ========================================================================== */

.tt-display-lg,
.tt-display-md,
.tt-display-sm,
.tt-headline-lg,
.tt-headline-md,
.tt-headline-sm,
.tt-title-lg,
.tt-title-md,
.tt-title-sm,
.tt-label-lg,
.tt-label-md,
.tt-label-sm,
.tt-body-lg,
.tt-body-md,
.tt-body-sm {
  font-family: var(--tt-font-ui);
  color: var(--tt-fg);
  margin: 0;
}

/* Display — reserved for marketing */
.tt-display-lg { font-size: var(--tt-fs-display-lg); font-weight: 400; letter-spacing: -0.25px; line-height: 1.04; }
.tt-display-md { font-size: var(--tt-fs-display-md); font-weight: 400; line-height: 1.08; }
.tt-display-sm { font-size: var(--tt-fs-display-sm); font-weight: 400; line-height: 1.12; }

/* Headlines — semibold, tight */
.tt-headline-lg { font-size: var(--tt-fs-headline-lg); font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; }
.tt-headline-md { font-size: var(--tt-fs-headline-md); font-weight: 600; line-height: 1.18; }
.tt-headline-sm { font-size: var(--tt-fs-headline-sm); font-weight: 600; line-height: 1.22; }

/* Titles — medium weight for section + nav */
.tt-title-lg { font-size: var(--tt-fs-title-lg); font-weight: 500; line-height: 1.27; }
.tt-title-md { font-size: var(--tt-fs-title-md); font-weight: 500; line-height: 1.5; }
.tt-title-sm { font-size: var(--tt-fs-title-sm); font-weight: 500; line-height: 1.43; }

/* Labels — ALL CAPS section labels; letter-spacing */
.tt-label-lg { font-size: var(--tt-fs-label-lg); font-weight: 500; letter-spacing: 0.1px; line-height: 1.43; }
.tt-label-md { font-size: var(--tt-fs-label-md); font-weight: 500; letter-spacing: 0.5px; line-height: 1.33; }
.tt-label-sm { font-size: var(--tt-fs-label-sm); font-weight: 500; letter-spacing: 0.5px; line-height: 1.45; }

/* Body */
.tt-body-lg { font-size: var(--tt-fs-body-lg); font-weight: 400; letter-spacing: 0.15px; line-height: 1.5; }
.tt-body-md { font-size: var(--tt-fs-body-md); font-weight: 400; letter-spacing: 0.25px; line-height: 1.43; }
.tt-body-sm { font-size: var(--tt-fs-body-sm); font-weight: 400; letter-spacing: 0.4px; line-height: 1.33; }

/* Signature display style used on App Store screens + big section headers
   ("ADD GAMES", "TRACK GAMES YOU ATTEND", "TEAMS 30"). */
.tt-display-bebas {
  font-family: var(--tt-font-display);
  font-weight: 400;
  color: var(--tt-fg);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 0.95;
}

/* Insights widget title ("PLAYER STATS", "TICKET DETAILS"): labelLarge,
   18px, 1.2 tracking, semibold, onSurfaceVariant. */
.tt-insights-title {
  font-family: var(--tt-font-ui);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--tt-fg-muted);
  text-transform: uppercase;
  margin: 0;
}

/* Big number on insights widgets ("9,790", "30", "60") — Bebas Neue */
.tt-big-number {
  font-family: var(--tt-font-display);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--tt-fg);
}

/* ==========================================================================
   Shell primitives
   ========================================================================== */

html, body {
  background: var(--tt-bg);
  color: var(--tt-fg);
  font-family: var(--tt-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}