/* base.css - design tokens, themes, reset, page background */

  :root {
    --bg: #F5F5F7;
    --card: #FFFFFF;
    --text: #1D1D1F;
    --text-secondary: #86868B;
    --text-tertiary: #AEAEB2;
    --separator: rgba(0, 0, 0, 0.08);
    --accent: #007AFF;
    --accent-soft: rgba(0, 122, 255, 0.1);
    --danger: #FF3B30;
    --success: #34C759;
    --check-border: #C7C7CC;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.07);
    --btn-hover: rgba(0, 0, 0, 0.05);
    --chip-bg: rgba(0, 0, 0, 0.045);
    --g-blue: #007AFF; --g-green: #34C759; --g-orange: #FF9500;
    --g-purple: #AF52DE; --g-pink: #FF2D55; --g-teal: #30B0C7;
    --g-indigo: #5856D6; --g-red: #FF3B30; --g-yellow: #FFCC00;
    --grid-dot: rgba(0, 0, 0, 0.1);
    --grid-glow: rgba(0, 122, 255, 0.05);
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* dark tokens apply when the system prefers dark (and the user hasn't
     forced light), or when the user forced dark via the toggle */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #000000;
      --card: #1C1C1E;
      --text: #F5F5F7;
      --text-secondary: #98989D;
      --text-tertiary: #636366;
      --separator: rgba(255, 255, 255, 0.1);
      --accent: #0A84FF;
      --accent-soft: rgba(10, 132, 255, 0.16);
      --danger: #FF453A;
      --success: #30D158;
      --check-border: #48484A;
      --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
      --btn-hover: rgba(255, 255, 255, 0.08);
      --chip-bg: rgba(255, 255, 255, 0.09);
      --g-blue: #0A84FF; --g-green: #30D158; --g-orange: #FF9F0A;
      --g-purple: #BF5AF2; --g-pink: #FF375F; --g-teal: #40C8E0;
      --g-indigo: #5E5CE6; --g-red: #FF453A; --g-yellow: #FFD60A;
      --grid-dot: rgba(255, 255, 255, 0.1);
      --grid-glow: rgba(10, 132, 255, 0.07);
    }
  }

  :root[data-theme="dark"] {
    --bg: #000000;
    --card: #1C1C1E;
    --text: #F5F5F7;
    --text-secondary: #98989D;
    --text-tertiary: #636366;
    --separator: rgba(255, 255, 255, 0.1);
    --accent: #0A84FF;
    --accent-soft: rgba(10, 132, 255, 0.16);
    --danger: #FF453A;
    --success: #30D158;
    --check-border: #48484A;
    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --btn-hover: rgba(255, 255, 255, 0.08);
    --chip-bg: rgba(255, 255, 255, 0.09);
    --g-blue: #0A84FF; --g-green: #30D158; --g-orange: #FF9F0A;
    --g-purple: #BF5AF2; --g-pink: #FF375F; --g-teal: #40C8E0;
    --g-indigo: #5E5CE6; --g-red: #FF453A; --g-yellow: #FFD60A;
    --grid-dot: rgba(255, 255, 255, 0.1);
    --grid-glow: rgba(10, 132, 255, 0.07);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(56px, 8vh, 88px) 16px 40px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* faint dot grid behind the cards; strongest up top, fading out towards
     the bottom so it never competes with content (deference) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(90% 55% at 50% -10%, var(--grid-glow), transparent 70%),
      radial-gradient(circle, var(--grid-dot) 1.2px, transparent 1.8px);
    background-size: auto, 26px 26px;
    -webkit-mask-image: radial-gradient(140% 110% at 50% 0%, #000 35%, rgba(0, 0, 0, 0.4) 68%, transparent 92%);
    mask-image: radial-gradient(140% 110% at 50% 0%, #000 35%, rgba(0, 0, 0, 0.4) 68%, transparent 92%);
  }