/* tokens.css — design tokens: colors, spacing scale, radii, fluid type */
@layer tokens {
  :root {
    /* enable light-dark() and let the OS surface its scheme to us */
    color-scheme: light dark;

    /* light baseline */
    --bg: #f7f7f5;
    --fg: #0a0a0a;
    --muted: #5a5a5a;
    /* systemIndigo — Apple's "premium blue" used in Calendar, Reminders,
       and several iOS 26 stock apps. Reads as designed, not default.
       Replaces #007AFF (still felt "hospital" to the user) and the
       earlier #3a6df0. mattemotto: blue is a decision, not a default. */
    --accent: #5856d6;
    --accent-ink: #ffffff;
    --card-bg: #ffffff;
    --border: #d8d8d6;
    --border-strong: #9a9a98;
    --danger: #c23636;

    /* spacing scale — derived from --space-m */
    --space-m: 1rem;
    --space-xs: calc(var(--space-m) / 4);
    --space-s: calc(var(--space-m) / 2);
    --space-l: calc(var(--space-m) * 1.75);
    --space-xl: calc(var(--space-m) * 3);

    /* radii */
    --radius-s: 0.35rem;
    --radius-m: 0.75rem;
    --radius-l: 1.25rem;

    /* fluid type */
    --type-body: clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem);
    --type-small: clamp(0.78rem, 0.72rem + 0.3vw, 0.9rem);
    --type-h1: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
    --type-h2: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);

    /* misc */
    --shadow-card: 0 1px 2px rgba(0 0 0 / 0.06), 0 4px 12px rgba(0 0 0 / 0.05);
    --hairline: 1px;

    /* Easing — Apple-canonical. --ease-spring is Ionic's production iOS
       page/sheet curve (millions of installs). --ease-out-quint covers
       generic micro-transitions; --ease-out-back is a deliberate
       overshoot for delight moments only. */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Durations — Apple-canonical iOS bands. Tap-in / release-decay /
       generic transition / modal-or-sheet. Same numbers Ionic ships. */
    --duration-tap: 120ms;
    --duration-release: 200ms;
    --duration-transition: 350ms;
    --duration-modal: 540ms;

    /* iOS list-cell tap highlight. Apple has never published the exact
       alpha; 0.04 is the community-measured value that matches
       -webkit-tap-highlight-color defaults. */
    --tap-highlight: rgba(0, 0, 0, 0.04);

    /* topbar / liquid-glass search pill — sized to Safari 26's
       Liquid Glass topbar reference. Pill at 36 px (2.25 rem) reads
       tighter than the 44 px iOS HIG would suggest, but matches the
       material's compact desktop expression; icon hit areas inside
       still extend to 44 px via padding so touch is unaffected. */
    --topbar-h: 3rem; /* 48 px — pill 36 + 6+6 padding */
    --topbar-pad-x: clamp(1rem, 2vw, 2rem);
    --searchbar-h: 2.25rem; /* 36 px — Safari Liquid Glass topbar */
    --searchbar-radius: 999px;
    --searchbar-pad-x: var(--space-s);
    --searchbar-icon: 1.125rem; /* 18 px */
    --searchbar-bg: var(--card-bg);
    --searchbar-border: var(--border);
    --searchbar-icon-color: var(--muted);
    --searchbar-max-w: 48rem; /* 768 px — fits the longer text-search placeholder */

    /* liquid-glass (floating chrome only — chevrons, action bar, scrubber strip) */
    --glass-tint: light-dark(rgba(255, 255, 255, 0.42), rgba(28, 28, 30, 0.42));
    --glass-tint-strong: light-dark(rgba(255, 255, 255, 0.7), rgba(20, 20, 24, 0.7));
    --glass-blur: blur(20px) saturate(180%) brightness(1.04);
    --glass-blur-strong: blur(24px) saturate(160%);
    --glass-fallback: light-dark(rgba(245, 245, 247, 0.92), rgba(28, 28, 30, 0.92));
    --glass-highlight: light-dark(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.1));
    --glass-shadow-inset: light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.35));
    --glass-hairline: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.16));
    --glass-drop: 0 8px 24px rgba(0, 0, 0, 0.18);

    /* selection + action affordances */
    --select-visual: 1.375rem; /* 22 px circle */
    --select-hit: 2.75rem; /* 44 px hit area per Apple HIG */
    --select-ring: rgba(255, 255, 255, 0.9);
    --select-fill: rgba(0, 0, 0, 0.25);
    --select-active-bg: #ffffff;

    /* card geometry — drives the +/- zoom in grid view */
    --card-min: 10rem; /* default; settings can override */
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0a0a0a;
      --fg: #f2f2f0;
      --muted: #9a9a98;
      --accent: #5e5ce6; /* systemIndigo dark */
      --accent-ink: #ffffff;
      --card-bg: #161616;
      --border: #2a2a2a;
      --border-strong: #4a4a4a;
      --danger: #ff6363;
      --shadow-card: 0 1px 2px rgba(0 0 0 / 0.5), 0 4px 16px rgba(0 0 0 / 0.4);
    }
  }
}