/* =========================================================
   صافي | Safy — Brand tokens (shared by App, Admin, Accounting)
   Concept: "مكسبك صافي" — pure like clean water, net like profit.
   Aqua = water/cleanliness/trust · Citrus = freshness/rewards · Coral = deals
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&family=Baloo+Bhaijaan+2:wght@600;700;800&display=swap");

:root {
  /* Aqua (primary) */
  --aqua-950: #032A31;
  --aqua-900: #053F48;
  --aqua-800: #075E6B;
  --aqua-700: #08707E;
  --aqua-600: #098A99;
  --aqua-500: #0BA3B3;
  --aqua-400: #38C2CF;
  --aqua-300: #7DDAE2;
  --aqua-200: #B5EBEF;
  --aqua-100: #DDF6F8;
  --aqua-50:  #F0FBFC;

  /* Citrus (accent: rewards, highlights, CTA on dark) */
  --citrus-600: #8DBA1F;
  --citrus-500: #B6E34A;
  --citrus-400: #C9F06B;
  --citrus-300: #DDF79E;
  --citrus-100: #F3FCD9;

  /* Coral (deals, discounts, urgency) */
  --coral-600: #E5483A;
  --coral-500: #FF5C4D;
  --coral-100: #FFE6E3;

  /* Amber (points, stars) */
  --amber-500: #FFB020;
  --amber-100: #FFF3D6;

  /* Ink (cool neutrals biased toward aqua) */
  --ink-950: #061820;
  --ink-900: #0A2230;
  --ink-800: #1B3442;
  --ink-700: #33505E;
  --ink-600: #557080;
  --ink-500: #7A92A0;
  --ink-400: #A3B5C0;
  --ink-300: #CBD7DE;
  --ink-200: #E3EAEE;
  --ink-100: #F1F5F7;
  --ink-50:  #F8FAFB;

  /* Semantic */
  --success: #12A15E;
  --success-bg: #E3F7EC;
  --warning: #E58A00;
  --warning-bg: #FFF2DB;
  --danger: #E5483A;
  --danger-bg: #FFE6E3;
  --info: #2F80ED;
  --info-bg: #E4EFFD;

  /* Type */
  --font-ui: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: "Baloo Bhaijaan 2", "Readex Pro", "Segoe UI", Tahoma, sans-serif;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Elevation (tinted with aqua ink) */
  --sh-1: 0 1px 2px rgba(6, 40, 52, .06), 0 1px 1px rgba(6, 40, 52, .04);
  --sh-2: 0 4px 14px -4px rgba(6, 40, 52, .12), 0 2px 4px rgba(6, 40, 52, .04);
  --sh-3: 0 16px 40px -12px rgba(6, 40, 52, .22), 0 4px 10px -4px rgba(6, 40, 52, .08);
  --sh-brand: 0 10px 24px -8px rgba(9, 138, 153, .55);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #0BA3B3 0%, #08707E 55%, #075E6B 100%);
  --grad-fresh: linear-gradient(135deg, #DDF6F8 0%, #F3FCD9 100%);
  --grad-deal: linear-gradient(135deg, #FF7A5C 0%, #FF5C4D 50%, #E5483A 100%);
  --grad-night: linear-gradient(160deg, #075E6B 0%, #053F48 60%, #032A31 100%);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}