/* ============================================================
   REZEMY design tokens v2 — pixel-extracted from
   /Users/vahan/Downloads/rezemy app.html (1110-LOC mockup, 16 screens).
   Adds Inter font + short token aliases that mirror the mockup
   (--r-B, --r-BD, --r-G, --r-T, etc) alongside long-form names.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── Brand & semantic colours (mockup verbatim) ───────────── */
  --r-B:           #1877F2;
  --r-BD:          #0C5AD4;
  --r-BL:          #E8F1FD;
  --r-G:           #F0F2F5;
  --r-G2:          #65676B;
  --r-T:           #1C1E21;
  --r-GR:          #2ECC71;
  --r-RD:          #E74C3C;
  --r-OR:          #F39C12;
  --r-W:           #FFFFFF;

  /* Long-form aliases */
  --r-blue:        var(--r-B);
  --r-blue-dark:   var(--r-BD);
  --r-blue-deep:   #0a4fb8;
  --r-blue-mid:    #3d8ef5;
  --r-blue-light:  var(--r-BL);
  --r-blue-soft:   #E7F3FF;

  --r-green:       var(--r-GR);
  --r-green-soft:  #DCFCE7;
  --r-amber:       var(--r-OR);
  --r-amber-soft:  #FEF9C3;
  --r-red:         var(--r-RD);
  --r-red-soft:    #FEE2E2;

  --r-bg:          var(--r-G);
  --r-card:        var(--r-W);
  --r-divider:     #E4E6EB;
  --r-text:        var(--r-T);
  --r-text-2:      var(--r-G2);
  --r-text-3:      #BCC0C4;
  --r-text-on-blue:rgba(255,255,255,0.78);

  /* ── Frame chrome ────────────────────────────────────────── */
  --r-device-bg:   #0d0d0d;
  --r-frame-border:#1a1a1a;
  --r-notch:       #1a1a1a;
  --r-frame-w:     393px;
  --r-frame-h:     852px;
  --r-status-h:    44px;
  --r-bnav-h:      62px;

  /* ── Radii ───────────────────────────────────────────────── */
  --r-r-xs:        7px;
  --r-r-sm:        9px;
  --r-r-md:        11px;
  --r-r-lg:        13px;
  --r-r-xl:        15px;
  --r-r-2xl:       17px;
  --r-r-3xl:       22px;
  --r-r-sheet:     24px;
  --r-r-pill:      999px;

  /* ── Spacing ─────────────────────────────────────────────── */
  --r-sp-1:        4px;
  --r-sp-2:        6px;
  --r-sp-3:        8px;
  --r-sp-4:        10px;
  --r-sp-5:        12px;
  --r-sp-6:        14px;
  --r-sp-7:        16px;
  --r-sp-8:        18px;
  --r-sp-10:       22px;
  --r-sp-12:       28px;

  /* ── Typography (Inter via Google Fonts) ─────────────────── */
  --r-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --r-tx-xs:       10px;
  --r-tx-sm:       11px;
  --r-tx-base:     12px;
  --r-tx-md:       13px;
  --r-tx-lg:       14px;
  --r-tx-xl:       15px;
  --r-tx-2xl:      16px;
  --r-tx-3xl:      17px;
  --r-tx-4xl:      18px;
  --r-tx-5xl:      19px;
  --r-tx-display:  22px;
  --r-tx-display-lg: 28px;
  --r-tx-display-xl: 32px;

  --r-fw-regular:  400;
  --r-fw-medium:   500;
  --r-fw-semibold: 600;
  --r-fw-bold:     700;
  --r-fw-extra:    800;
  --r-fw-black:    900;

  /* ── Shadows ─────────────────────────────────────────────── */
  --r-sh-0:        0 1px 5px rgba(0,0,0,0.05);
  --r-sh-1:        0 1px 6px rgba(0,0,0,0.06);
  --r-sh-2:        0 2px 8px rgba(0,0,0,0.07);
  --r-sh-3:        0 2px 12px rgba(0,0,0,0.08);
  --r-sh-pop:      0 4px 14px rgba(0,0,0,0.09);
  --r-sh-pop-l:    0 4px 16px rgba(0,0,0,0.12);
  --r-sh-aibar:    0 4px 16px rgba(24,119,242,0.35);
  --r-sh-qrcard:   0 4px 16px rgba(24,119,242,0.35);
  --r-sh-overlap:  0 4px 14px rgba(0,0,0,0.09);
  --r-sh-device:   0 30px 80px rgba(0,0,0,0.7);

  /* ── Transitions ─────────────────────────────────────────── */
  --r-t-fast:      120ms ease-out;
  --r-t-base:      180ms ease-out;
  --r-t-slow:      240ms ease-out;

  /* ── Z-index scale ───────────────────────────────────────── */
  --r-z-bnav:      90;
  --r-z-status:    100;
  --r-z-search:    400;
  --r-z-sheet:     500;
  --r-z-toast:     9999;

  /* ── Per-tone accent palette (hash-seeded avatars) ───────── */
  --r-tone-purple: #7C3AED;
  --r-tone-sky:    #0369A1;
  --r-tone-rose:   #BE185D;
  --r-tone-emerald:#065F46;
  --r-tone-amber:  #92400E;
  --r-tone-blue:   #1877F2;
  --r-tone-clay:   #B45309;
  --r-tone-indigo: #3730A3;
}