/* ============================================================
   Pinky Paws Pet Finder — tokens.css
   Source of truth: DESIGN-SYSTEM.md §1 (extraction of 2026-07-10).
   Deviations from the extraction are logged in DESIGN-DELTAS.md.
   ============================================================ */

:root {
  /* ---- Color: brand ---- */
  --pink:            #ff1493;
  --pink-soft:       #ffb3d9;
  --pink-deep:       #cc0f75;
  --pink-wash-08:    rgba(255, 20, 147, 0.08);
  --pink-wash-10:    rgba(255, 20, 147, 0.10);
  --pink-wash-12:    rgba(255, 20, 147, 0.12);
  --pink-wash-14:    rgba(255, 20, 147, 0.14);
  --pink-wash-25:    rgba(255, 20, 147, 0.25);  /* empty-state halo border */
  --pink-tint-text:  #ffd6ec;                    /* text inside pink-washed notice boxes */
  --pink-ink:        #4a0526;                    /* D10: ink on pink-soft surfaces (search pill) */
  --ink-on-pink:     #0a0a0a;                    /* D10: micro-label ink on hot pink surfaces */

  /* ---- Color: status ---- */
  --urgent:          #ff4d4d;
  --success:         #7dd87d;
  --success-wash-12: rgba(125, 216, 125, 0.12);
  --success-wash-14: rgba(125, 216, 125, 0.14);

  /* ---- Color: ground ---- */
  --bg:              #0a0a0a;
  --card:            #1a1a1a;
  --card-2:          #222222;   /* pressed state */
  --modal-bg:        #141414;
  --drawer-bg:       #0f0f0f;
  --input-bg:        #151515;
  --input-border:    #262626;
  --checkbox-well:   #1c1c1c;
  --photo-well:      #2a2a2a;   /* photo placeholder ground */
  --divider:         #2a2a2a;
  --list-divider:    #1d1d1d;
  --review-divider:  #202020;
  --tabbar-hairline: #161616;

  /* ---- Color: text ---- */
  --text:            #ffffff;
  --text-body:       #d4d4d4;   /* body on dark */
  --text-mid:        #c4c4c4;   /* secondary, field labels */
  --text-dim:        #8a8a8a;   /* tertiary, meta, timestamps (D10 floor: nothing dimmer on text) */
  --text-ghost:      #555555;   /* decorative only: chevrons, photo placeholder icons */
  --ring-idle:       #6e6e6e;   /* D15: unselected radio ring, 3.6:1 on input-bg (1.4.11 needs 3:1) */
  --text-update:     #e4e4e4;   /* update entry body */

  /* ---- Color: map palette (MapLibre style target, DESIGN-SYSTEM §1) ---- */
  --map-land:        #e8e6df;
  --map-water:       #cfe4ef;
  --map-parks:       #d6e7cc;
  --map-highway:     #f5b93a;

  /* ---- Shadows ---- */
  --glow-sm:         0 6px 14px rgba(255, 20, 147, 0.35);   /* pill CTAs */
  --glow-lg:         0 10px 24px rgba(255, 20, 147, 0.35);  /* sticky CTA */
  --shadow-add-btn:  0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-pin:      0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-modal:    0 30px 60px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 20, 147, 0.40);

  /* ---- Type ---- */
  --font: 'Inter', -apple-system, system-ui, sans-serif;

  /* ---- Radii ---- */
  --r-pill:   999px;  /* search, chips, small CTAs, badges */
  --r-cta:    14px;   /* sticky / block CTA */
  --r-review: 14px;   /* review table */
  --r-input:  12px;   /* inputs, choices, action buttons, notices */
  --r-photo:  10px;   /* photos, thumbs, small cards, pledge well */
  --r-logo:   8px;    /* modal logo */
  --r-brand:  6px;    /* header logo */
  --r-modal:  20px;
  --r-chip:   4px;    /* tiny status chips */

  /* ---- Spacing ---- */
  --gutter:     16px;
  --gutter-lg:  18px;
  --pad-card:   14px;

  /* ---- Safe areas (D9: env() with 0 fallback, not the prototype's 54/28) ---- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Motion ---- */
  --dur-fade:    0.18s;
  --dur-pop:     0.22s;
  --dur-slide:   0.25s;
  --dur-press:   0.12s;
  --dur-bar:     0.25s;  /* progress width */
  --dur-spin:    0.9s;
  --ease-pop:    cubic-bezier(0.2, 1.2, 0.4, 1);
  --ease-drawer: cubic-bezier(0.2, 0.9, 0.3, 1);
}