/* ════════════════════════════════════════════════════════════════
   Apple Liquid Glass -- design tokens
   Reference everything via var(--...); never hard-code a raw value
   that a token already names.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Neutrals (the interface skeleton) */
  --bg:        #f5f5f7;
  --surface:   #ffffff;
  --hover:     #fbfbfd;
  --text:      #1d1d1f;
  --text-body: #424245;
  --text-2:    #6e6e73;
  --text-3:    #86868b;
  --text-4:    #aeaeb2;
  --faint:     #d2d2d7;
  --hairline:  rgba(0,0,0,0.07);

  /* Accents (emphasis only -- body stays grayscale) */
  --accent:      #0071e3;
  --accent-link: #0066cc;
  --indigo:      #5e5ce6;
  --heat:        #ff6b00;
  --heat-bg:     rgba(255,107,0,0.1);
  --live:        #30d158;

  /* Signature gradients (hero / CTA / placeholder art only) */
  --grad-blue: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
  --grad-warm: linear-gradient(135deg, #ff9f0a 0%, #ff375f 100%);
  --grad-green:linear-gradient(135deg, #30d158 0%, #0a84ff 100%);
  --grad-cta:  linear-gradient(135deg, #0071e3 0%, #5e5ce6 100%);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
          'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radius (semantic tiers) */
  --r-pill:  999px;
  --r-chip:  6px;
  --r-thumb: 12px;
  --r-sheet: 16px;
  --r-card:  18px;
  --r-panel: 22px;
  --r-hero:  26px;

  /* Shadow (always two-layer) */
  --sh-card:    0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
  --sh-panel:   0 1px 3px rgba(0,0,0,0.05), 0 14px 40px rgba(0,0,0,0.05);
  --sh-lift:    0 12px 32px rgba(0,0,0,0.1);
  --sh-cta:     0 20px 54px rgba(0,113,227,0.24);
  --sh-overlay: 0 2px 8px rgba(0,0,0,0.10), 0 30px 80px rgba(0,0,0,0.24);

  --track: #e8e8ed;

  --max-read: 720px;
  --max-grid: 1080px;
  --pad-x:    22px;

  --ease-spring:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

.glass-nav {
  background: rgba(245,245,247,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.glass-chip {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(48,209,88,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(48,209,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); }
}