/* ============================================================
   PULSE LIBYA — colors_and_type.css
   Community-powered situational awareness.

   The single source of truth for Pulse's visual foundations.
   Import this file first; everything else builds on these tokens.

   FONT NOTE / SUBSTITUTION FLAG ----------------------------------
   No original font files were provided. The reference app ("expen")
   pairs a hand-drawn MARKER font for headlines with a precise
   MONOSPACE for body/data. We reproduce that contrast with the
   closest Google Fonts matches and load them from the Google CDN:
     • Marker / display .... Kalam        (was: an iOS marker hand)
     • Mono / body / data .. JetBrains Mono(was: SF Mono-ish)
     • Arabic / RTL ........ IBM Plex Sans Arabic
   If you have licensed brand fonts, drop the .woff2 files in /fonts
   and swap the @font-face / --font-* vars below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* ---------- CORE NEUTRALS (warm paper, not stark white) ---------- */
  --paper:        #FBFAF7;  /* app background — warm off-white field-notebook */
  --paper-2:      #F3F1EA;  /* inset / pressed / subtle raised surfaces */
  --surface:      #FFFFFF;  /* cards, sheets, elevated surfaces */
  --ink:          #1A1714;  /* primary text — warm near-black */
  --ink-2:        #5C5650;  /* secondary text, captions */
  --ink-3:        #9A938A;  /* tertiary, placeholder, disabled, faded list edges */
  --hairline:     #E7E3DA;  /* borders & dividers */
  --hairline-2:   #D9D4C8;  /* stronger border (selected card, inputs) */

  /* ---------- BRAND — "pulse" coral/vermillion ---------- */
  --pulse:        #FF4127;  /* primary accent: the live signal, the heartbeat */
  --pulse-ink:    #D62E18;  /* pressed / darker brand, brand text on light */
  --pulse-wash:   #FFEDE8;  /* tinted background: destructive pills, alert chips */
  --pulse-glow:   rgba(255, 65, 39, 0.35); /* FAB drop-glow */

  /* ---------- SEMANTIC STATUS (the civic category system) ----------
     Each report category owns a hue. Used for map pins, chips,
     category headers and the live feed. */
  --fuel:         #F0A019;  /* ⛽ fuel availability — amber */
  --cash:         #14A05A;  /* 💵 ATM / cash status — green */
  --traffic:      #EC5B2A;  /* 🚧 traffic & road closures — burnt orange */
  --power:        #F4C518;  /* ⚡ power outages — yellow */
  --internet:     #2E72E8;  /* 📶 internet outages — blue */
  --safety:       #D11A3A;  /* 🛡️ safety incidents — crimson */
  --services:     #12A5A0;  /* 🏥 public services — teal */

  /* tinted washes for category chips / backgrounds (12% surfaces) */
  --fuel-wash:     #FDF1DC;
  --cash-wash:     #E3F4EB;
  --traffic-wash:  #FCE9E0;
  --power-wash:    #FDF7DA;
  --internet-wash: #E4ECFB;
  --safety-wash:   #FAE3E8;
  --services-wash: #DEF3F2;

  /* ---------- VERIFICATION / REPUTATION ---------- */
  --verified:     #14A05A;  /* confirmed by multiple reporters / trusted */
  --pending:      #F0A019;  /* awaiting corroboration */
  --disputed:     #D11A3A;  /* conflicting reports */
  --pos:          #14A05A;  /* positive delta, "available", income-green echo */
  --neg:          #D11A3A;  /* negative delta, "out", expense-red echo */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Kalam', 'Bradley Hand', 'Comic Sans MS', cursive;       /* marker hand */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* body + data */
  --font-arabic:  'IBM Plex Sans Arabic', 'Noto Naskh Arabic', sans-serif;  /* RTL */

  /* ---------- TYPE SCALE (px) ---------- */
  --t-display-xl: 34px;  /* hero screen title (marker) */
  --t-display-l:  27px;  /* screen / section title (marker) */
  --t-display-m:  21px;  /* card title, doodle annotation (marker) */
  --t-data-xl:    40px;  /* big counts & amounts (mono 700, tabular) */
  --t-h1:         21px;  /* mono heading */
  --t-h2:         17px;  /* mono subheading */
  --t-body:       16px;  /* default body / list label */
  --t-label:      15px;  /* list label, button */
  --t-small:      13px;  /* caption, secondary value */
  --t-micro:      11px;  /* meta tag, uppercase eyebrow */

  /* ---------- RADII ---------- */
  --r-pill:  999px;
  --r-card:  16px;
  --r-chip:  10px;
  --r-sm:    10px;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* ---------- ELEVATION ---------- */
  --shadow-card:  0 1px 2px rgba(26,23,20,.04), 0 10px 28px rgba(26,23,20,.05);
  --shadow-float: 0 10px 34px rgba(26,23,20,.14);
  --shadow-fab:   0 8px 22px var(--pulse-glow);

  /* ---------- MOTION ---------- */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur-fast:    120ms;
  --dur:         220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Convenience classes that encode Pulse's voice. Use them or
   read them as a reference for inline styling.
   ============================================================ */

.pl-display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-xl); line-height: 1.12; color: var(--ink); letter-spacing: -.01em; }
.pl-display-l  { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-l);  line-height: 1.15; color: var(--ink); }
.pl-display-m  { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-m);  line-height: 1.2;  color: var(--ink); }
.pl-annotation { font-family: var(--font-display); font-weight: 400; font-size: var(--t-display-m);  line-height: 1.25; color: var(--pulse); } /* red marker side-notes */

.pl-h1   { font-family: var(--font-mono); font-weight: 600; font-size: var(--t-h1); line-height: 1.25; color: var(--ink); }
.pl-h2   { font-family: var(--font-mono); font-weight: 600; font-size: var(--t-h2); line-height: 1.3;  color: var(--ink); }
.pl-body { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-body); line-height: 1.5; color: var(--ink); }
.pl-label{ font-family: var(--font-mono); font-weight: 500; font-size: var(--t-label); line-height: 1.3; color: var(--ink); }
.pl-small{ font-family: var(--font-mono); font-weight: 400; font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); }
.pl-micro{ font-family: var(--font-mono); font-weight: 500; font-size: var(--t-micro); line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pl-data { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-data-xl); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The signature trailing-period accent: <span class="dot">.</span> */
.pl-dot { color: var(--pulse); }

/* faded decimals on data (e.g. 27,530.713 → grey fraction) */
.pl-frac { color: var(--ink-3); }