/* ==========================================================================
   Steplet Design System — Foundations
   --------------------------------------------------------------------------
   Pulled from mobile/lib/main.dart (`Color(0xFF5B45F0)` seed → Material 3
   ColorScheme) + observed UI from product screenshots.

   Steplet ships only the Material 3 default theme + Roboto/SF system fonts.
   We substitute **Inter** below as it most closely matches the rendered
   screenshots while remaining Google-Fonts-available. Flag for the user:
   no custom font files were attached.
   ========================================================================== */

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

:root {
  /* ----- Brand / Primary ------------------------------------------------- */
  --steplet-primary:        #5B45F0;   /* seed color from main.dart */
  --steplet-primary-dark:   #4232C8;
  --steplet-primary-tint:   #EEEAFD;   /* used for selected-tab pills, filled-text bg */
  --steplet-primary-soft:   #C9C0F8;   /* progress-bar trough, dividers in tinted ctx */
  --steplet-on-primary:     #FFFFFF;

  /* ----- Semantic accents (observed in equipped life-bar) ---------------- */
  --steplet-warning:        #FF9800;   /* 25-50% life */
  --steplet-danger:         #F44336;   /* <25% life, "売り切れ" badge, Dangerous setting */
  --steplet-success:        #2E7D32;

  /* ----- Surfaces -------------------------------------------------------- */
  /* M3 surface system derived from #5B45F0 seed (tonal palette tinted purple) */
  --steplet-bg:                 #F4F1FB;   /* default body bg — lavender wash */
  --steplet-surface:            #FFFFFF;
  --steplet-surface-container:  #F2EEF9;
  --steplet-surface-high:       #E7E0F0;   /* stat-card chips */
  --steplet-surface-low:        #FAF8FF;

  /* Locker / showcase warm cream — used behind sneaker shelves */
  --steplet-cream:              #F5EFE2;
  --steplet-cream-strong:       #E4D2A8;   /* the wood floor band */
  --steplet-wood:               #B89766;

  /* ----- Text ------------------------------------------------------------ */
  --steplet-fg:                 #1B1B1F;   /* primary heading / body */
  --steplet-fg-muted:           #46464E;
  --steplet-fg-soft:            #79747E;   /* labels, captions */
  --steplet-fg-on-tint:         #2A2152;   /* text on primary-tint pills */

  /* ----- Lines / outlines ----------------------------------------------- */
  --steplet-outline:            #C8C5D0;
  --steplet-outline-variant:    #E5E1EC;

  /* ----- Radii (Material 3 token feel) ---------------------------------- */
  --steplet-radius-xs:  4px;    /* progress bars, small chips */
  --steplet-radius-sm:  8px;    /* stat cards, collection cards */
  --steplet-radius-md:  12px;
  --steplet-radius-lg:  16px;   /* bottom sheets */
  --steplet-radius-xl:  24px;
  --steplet-radius-pill: 9999px; /* CTAs, tab pill, invite-code chip */

  /* ----- Elevation / shadows ------------------------------------------- */
  --steplet-shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --steplet-shadow-md: 0 2px 10px rgba(0,0,0,0.13);  /* card on map */
  --steplet-shadow-lg: 0 8px 24px rgba(0,0,0,0.16);

  /* ----- Spacing scale (4px grid) -------------------------------------- */
  --steplet-space-1:  4px;
  --steplet-space-2:  8px;
  --steplet-space-3:  12px;
  --steplet-space-4:  16px;
  --steplet-space-5:  20px;
  --steplet-space-6:  24px;
  --steplet-space-8:  32px;
  --steplet-space-10: 40px;

  /* ----- Type ---------------------------------------------------------- */
  --steplet-font-sans: 'Inter', -apple-system, BlinkMacSystemFont,
                       'SF Pro Text', 'Hiragino Sans', 'Yu Gothic UI',
                       'Noto Sans JP', sans-serif;
  --steplet-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular,
                       Menlo, Consolas, monospace;
}

/* ==========================================================================
   Base + semantic type styles
   --------------------------------------------------------------------------
   Mirrors Material 3 textTheme usage we observed:
   - displayLarge → screen-level page titles (e.g. "ストリートブレイカー C3")
   - titleMedium  → tab labels, stat-card titles
   - labelMedium  → micro-labels above stat values
   - bodySmall    → caption / helper text
   ========================================================================== */

.steplet-display {
  font: 700 32px/1.15 var(--steplet-font-sans);
  letter-spacing: -0.01em;
  color: var(--steplet-fg);
}
.steplet-h1 {
  font: 800 28px/1.2 var(--steplet-font-sans);
  letter-spacing: -0.01em;
  color: var(--steplet-fg);
}
.steplet-h2 {
  font: 700 22px/1.25 var(--steplet-font-sans);
  color: var(--steplet-fg);
}
.steplet-h3 {
  font: 700 18px/1.3 var(--steplet-font-sans);
  color: var(--steplet-fg);
}
.steplet-title {            /* tab labels, card titles */
  font: 600 16px/1.3 var(--steplet-font-sans);
  color: var(--steplet-fg);
}
.steplet-body {
  font: 400 15px/1.5 var(--steplet-font-sans);
  color: var(--steplet-fg-muted);
}
.steplet-body-strong {
  font: 600 15px/1.5 var(--steplet-font-sans);
  color: var(--steplet-fg);
}
.steplet-label {            /* uppercase rarity / small labels */
  font: 700 13px/1.2 var(--steplet-font-sans);
  letter-spacing: 0.02em;
  color: var(--steplet-fg-soft);
}
.steplet-caption {
  font: 400 12px/1.4 var(--steplet-font-sans);
  color: var(--steplet-fg-soft);
}
.steplet-metric {           /* big numerical readout, e.g. 82,398 */
  font: 800 22px/1.1 var(--steplet-font-sans);
  letter-spacing: -0.01em;
  color: var(--steplet-fg);
  font-variant-numeric: tabular-nums;
}
.steplet-rarity {           /* STANDARD / RARE / ELITE / GRAIL */
  font: 800 14px/1 var(--steplet-font-sans);
  letter-spacing: 0.08em;
  color: var(--steplet-primary);
  text-transform: uppercase;
}
.steplet-mono {
  font: 600 14px/1.2 var(--steplet-font-mono);
  color: var(--steplet-fg);
}

/* Reusable semantic element styles */
.steplet-page  { background: var(--steplet-bg); color: var(--steplet-fg);
                 font-family: var(--steplet-font-sans); }

.steplet-card {
  background: var(--steplet-surface);
  border-radius: var(--steplet-radius-lg);
  box-shadow: var(--steplet-shadow-sm);
  padding: var(--steplet-space-4);
}

.steplet-pill {
  border-radius: var(--steplet-radius-pill);
  padding: 10px 20px;
  font: 600 14px/1 var(--steplet-font-sans);
}