/* Hala 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. */
  --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;

  /* --- 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-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);
}

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

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