/* Mirai App — design tokens
 * Per the brief §9. Dark default. Black/white core with mirai red accent.
 * No gradients (except the tier-premium gold).
 */

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

:root {
  /* Surfaces — warm-tinted near-blacks */
  --surface-primary: #0A0A0A;
  --surface-secondary: #161616;
  --surface-tertiary: #232323;
  --surface-elevated: #1C1C1C;
  --surface-overlay: rgba(10, 10, 10, 0.72);

  /* Text */
  --text-primary: #FAFAFA;
  --text-secondary: #A8A8A8;
  --text-tertiary: #6E6E6E;
  --text-quaternary: #4A4A4A;
  --text-inverse: #0A0A0A;

  /* Accent — used extremely sparingly */
  --accent-primary: #FF3D5A;       /* mirai red */
  --accent-primary-soft: rgba(255, 61, 90, 0.16);
  --accent-secondary: #E8E1D1;     /* paper / off-white */

  /* Functional */
  --success: #5ED084;
  --warning: #FFB845;
  --error: #FF4757;
  --info: #5AC8FA;

  /* Member tier */
  --tier-free: #A8A8A8;
  --tier-premium: #D4AF37;
  --tier-premium-soft: rgba(212, 175, 55, 0.16);

  /* Borders / dividers */
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, system-ui, sans-serif;
  --font-jp: 'Noto Sans JP', 'Inter', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', monospace;

  /* Type scale (mobile actuals from brief §9.3) */
  --text-display-xl: 40px;   /* hero numerals */
  --text-display-lg: 28px;   /* hero titles */
  --text-heading-lg: 24px;   /* screen titles */
  --text-heading-md: 18px;   /* section titles */
  --text-body-lg: 16px;
  --text-body-md: 14px;
  --text-caption: 12px;
  --text-micro: 10px;

  /* Spacing (8pt base) */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Elevation */
  --elevation-1: 0 1px 2px rgba(0,0,0,0.3);
  --elevation-2: 0 8px 24px rgba(0,0,0,0.4);

  /* Motion */
  --motion-instant: 100ms;
  --motion-quick: 200ms;
  --motion-moderate: 350ms;
  --motion-deliberate: 500ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* Light mode overrides — sampling only (see brief: dark is default) */
[data-mode="light"] {
  --surface-primary: #FAFAF7;
  --surface-secondary: #F2F1EC;
  --surface-tertiary: #E8E6DF;
  --surface-elevated: #FFFFFF;
  --surface-overlay: rgba(250, 250, 247, 0.78);

  --text-primary: #0A0A0A;
  --text-secondary: #4A4A4A;
  --text-tertiary: #8A8A8A;
  --text-quaternary: #BABABA;
  --text-inverse: #FAFAFA;

  --hairline: rgba(0, 0, 0, 0.06);
  --hairline-strong: rgba(0, 0, 0, 0.12);
}

/* Base resets */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: var(--font-body); }

/* Utility — kanji motif */
.kanji {
  font-family: var(--font-jp);
  font-weight: 700;
  letter-spacing: 0;
}

/* The mirai. dot — signature accent */
.tecka {
  color: var(--accent-primary);
}

/* Reusable type classes — apply to elements directly */
.t-display-xl { font-size: var(--text-display-xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.t-display-lg { font-size: var(--text-display-lg); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.t-heading-lg { font-size: var(--text-heading-lg); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.t-heading-md { font-size: var(--text-heading-md); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.t-body-lg    { font-size: var(--text-body-lg);    font-weight: 400; line-height: 1.5; }
.t-body-md    { font-size: var(--text-body-md);    font-weight: 400; line-height: 1.5; }
.t-caption    { font-size: var(--text-caption);    font-weight: 500; line-height: 1.4; }
.t-micro      { font-size: var(--text-micro);      font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }

/* Hide scrollbars but keep scrollability */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Smooth tap feedback — replaces hover for touch */
@media (hover: hover) {
  .tap:hover { background: rgba(255,255,255,0.04); }
}
.tap:active { background: rgba(255,255,255,0.08); }

/* Image-slot styling — match Mirai's tasteful placeholder */
image-slot {
  background: var(--surface-elevated) !important;
  border: 1px solid var(--hairline) !important;
}
image-slot::part(placeholder),
image-slot .placeholder {
  color: var(--text-tertiary) !important;
  font-family: var(--font-body) !important;
}

/* Live setlist pulse */
@keyframes mirai-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.pulse-dot {
  animation: mirai-pulse 1.2s var(--ease-standard) infinite;
}

/* Marquee for "now playing" indicator */
@keyframes mirai-spectrum {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

@keyframes mirai-sheet-up {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; opacity: 0.85; }
}