/* Spotchati Design Tokens
 * Single source of truth for colors/spacing/typography/radius.
 *
 * Keep the current green brand, but unify shades via a simple scale.
 */

:root{
  /* Responsive app spacing + title scale */
  --pad: 16px;
  --title: 34px;

  /* ----------------------------- */
  /* UI guardrails (layout)         */
  /* ----------------------------- */
  /* Single source of truth for the app canvas width (phone-like, not tablet-wide). */
  --app-max-w: 430px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --line-height-body: 1.45;
  --line-height-tight: 1.2;

  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;

  /* Spacing */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --radius-xl: 22px;
  --radius-sheet: 18px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 12px 32px rgba(0,0,0,.16);
  --shadow-nav: 0 -1px 0 rgba(60,60,67,.14), 0 -10px 26px rgba(0,0,0,.08);
  --shadow-sheet: 0 1px 0 rgba(0,0,0,.04);

  /* Brand + semantic colors */
  --color-brand-500: #1B950B; /* main green */
  --color-brand-600: #167A09; /* pressed */
  --color-brand-soft: rgba(27,149,11,0.14);
  --color-brand-border: rgba(27,149,11,0.25);
  --color-brand-ring: rgba(27,149,11,0.28);

  --color-page: #F2F2F7;      /* iOS grouped background */
  --color-surface: #ffffff;   /* cards/sheets */
  --color-surface-2: #EFEFF4; /* iOS search field background */
  --color-border: #E9EDEF;

  --color-text: #111111;
  --color-muted: #344054;
  --color-nav-inactive: rgba(17,17,17,.55);

  --color-success: #0A7A2F;
  --color-warning: #B54708;
  --color-danger: #B00020;
  --color-danger-bg: #FFECEC;

  /* Controls */
  --control-height: 48px;
  --icon-btn-size: clamp(44px, 10.6vw, 48px);
  --icon-btn-size-strong: clamp(46px, 11.2vw, 50px);
  --icon-btn-size-compact: clamp(36px, 9vw, 40px);
  --icon-glyph-size: clamp(21px, 5.2vw, 23px);
  --icon-glyph-size-strong: clamp(22px, 5.8vw, 25px);
  --icon-glyph-size-prominent: clamp(23px, 6vw, 26px);
  --icon-glyph-size-compact: clamp(17px, 4.4vw, 19px);

  /* --- Back-compat mapping (do not remove without a full refactor) --- */
  --accent: var(--color-brand-500);
  --accent-pressed: var(--color-brand-600);
  --accent-soft: var(--color-brand-soft);
  --accent-border: var(--color-brand-border);

  --brand: var(--accent);
  --brandDark: var(--accent-pressed);
  --brandSoft: var(--accent-soft);
  --brandRing: var(--color-brand-ring);

  --bg: var(--color-page);
  --surface: var(--color-surface);
  --surface2: var(--color-surface-2);
  --border: var(--color-border);
  /* Divider should be subtle (WhatsApp-like) */
  --divider: var(--wa-divider);

  --text: var(--color-text);
  --muted: var(--color-muted);

  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --dangerBg: var(--color-danger-bg);

  --shadowSm: var(--shadow-sm);
  --shadowMd: var(--shadow-md);
  /* Soft elevation for small cards/rows */
  --shadowSoft: var(--wa-shadow-soft);

  --rSm: var(--radius-sm);
  --rMd: var(--radius-md);
  --rLg: var(--radius-lg);
  --rPill: var(--radius-pill);

  /* Nearby (and other list-card screens) */
  --radiusCard: 16px;
  --radiusChip: 999px;

  /* Any previous "WhatsApp green" should now be the single brand token. */
  --wa-green: var(--accent);
  --wa-green-2: var(--accent);
  --hala-green: var(--accent);
  --wa-accent: var(--accent);

  /* WhatsApp iOS-like palette (Chats list) */
  --wa-bg: #F2F2F7;                    /* iOS grouped background */
  --wa-surface: #FFFFFF;
  --wa-divider: rgba(60,60,67,.16);    /* iOS-like separator */
  --wa-muted: rgba(60,60,67,.60);
  --wa-muted2: rgba(60,60,67,.35);
  --wa-green: #25D366;                 /* WhatsApp green */
  --wa-read-blue: #34B7F1;             /* WhatsApp-like read receipt blue */
  --chat-meta-muted: #667781;          /* WhatsApp-style message metadata gray */
  --chat-meta-outgoing-emoji: var(--chat-meta-muted); /* keep emoji/sticker timestamps unified with text meta */
  --chat-meta-on-media: rgba(255,255,255,.92);
  --chat-meta-shadow-media: 0 1px 1px rgba(0,0,0,.70), 0 0 3px rgba(0,0,0,.38);
  --wa-chipFill: #E5E5EA;              /* iOS gray fill */
  --wa-chipBorder: rgba(60,60,67,.18);
  --wa-searchBg: #EFEFF4;

  /* Back-compat aliases used elsewhere in the app */
  --wa-text: #000000;
  --wa-subtext: var(--wa-muted);
  --wa-chip-border: var(--wa-chipBorder);
  --wa-chip-bg: #FFFFFF;
  --wa-chip-active-bg: var(--wa-chipFill);
  --wa-chip-active-text: rgba(0,0,0,.93);
  --wa-shadow-soft: 0 1px 1px rgba(0,0,0,.06);

  --wa-app-bg: var(--wa-bg);
  --wa-sep: var(--wa-divider);
  --wa-border: var(--border);
  --wa-card: var(--surface);
  /* Keep iOS-muted for WhatsApp-like UI (do not map to app muted). */
  --wa-muted: rgba(60,60,67,.60);

  /* Bottom nav */
  --navInactive: var(--color-nav-inactive);

  /* Calm chat palette */
  --chat-bg: var(--surface2);
  --bubble-me: var(--accent);
  --bubble-them: var(--surface);
  --bubble-them-border: var(--divider);

  /* Chats density (Step 18) */
  --chat-pad-x: 12px;
  --chat-pad-y: 8px;
  --chat-gap: 8px;
  --chat-avatar: 40px;
  --chat-row-minh: 60px;
  --chat-name-size: 15px;
  --chat-snippet-size: 12px;
  --chat-time-size: 10px;
  --chat-name-weight: 800;
  --chat-snippet-weight: 600;
  --chat-muted: rgba(0,0,0,.55);
  --chat-muted2: rgba(0,0,0,.42);
  --chat-divider: rgba(0,0,0,.08);

  --shadow: var(--shadowMd);
  --radius: var(--rLg);
}

html.is-touch,
html.is-native-app{
  /*
   * Keep critical mobile/native icon chrome independent from viewport width.
   * On real iPhones, device display scaling can make `vw`-driven controls look
   * smaller than they do in Simulator even on the same model. Fixed touch sizes
   * make back/info/location/filter actions visually stable across hardware.
   */
  --icon-btn-size: 48px;
  --icon-btn-size-strong: 50px;
  --icon-btn-size-compact: 44px;
  --icon-glyph-size: 24px;
  --icon-glyph-size-strong: 26px;
  --icon-glyph-size-prominent: 27px;
  --icon-glyph-size-compact: 20px;
}

@media (max-width: 360px){
  :root{ --pad: 12px; --title: 30px; }
}

@media (min-width: 768px){
  :root{ --pad: 20px; --title: 36px; }
}