/* AqaryPro Design Tokens — v1
 * Single source of truth extracted from the approved design mockup.
 * Override any token here to retheme the whole system.
 * Loaded last in css-files.php / eng-css-files.php → applied in aqary-skin.css.
 */

:root {
  /* ── Brand (primary blue) ─────────────────────────────────── */
  --aq-brand-50:  #EBF6FE;
  --aq-brand-100: #D6EDFC;
  --aq-brand-200: #A8D9F8;
  --aq-brand-300: #71BFF4;
  --aq-brand-400: #3FA9F1;
  --aq-brand-500: #1E9FF2;   /* canonical brand / primary button */
  --aq-brand-600: #0C84D1;   /* hover */
  --aq-brand-700: #0A6FB0;   /* active / dark links */
  --aq-brand-800: #08568A;
  --aq-brand-900: #073e64;   /* deepest gradient stop (login brand panel) */

  /* ── Ink (text / neutral scale) ──────────────────────────── */
  --aq-ink-100: #F1F4F8;     /* subtle bg, row hover */
  --aq-ink-200: #E5E9F0;     /* border default */
  --aq-ink-300: #A8B2C0;     /* placeholder, separator */
  --aq-ink-400: #7B8696;     /* icon idle, secondary caption */
  --aq-ink-500: #515D6B;     /* muted text, table header */
  --aq-ink-600: #353F4F;     /* table body, nav idle */
  --aq-ink-700: #1F2937;     /* labels */
  --aq-ink-800: #1A2332;     /* body text */
  --aq-ink-900: #0F1A2A;     /* headings */

  /* ── Surface ─────────────────────────────────────────────── */
  --aq-surface:        #F4F6F9;  /* page background */
  --aq-surface-card:   #FFFFFF;  /* card/panel background */
  --aq-surface-muted:  #EDF1F6;  /* subtle panel variant */
  --aq-surface-border: #E5E9F0;  /* universal hairline */

  /* ── Status ──────────────────────────────────────────────── */
  --aq-success-50:  #F0FDF4;
  --aq-success-500: #10B981;
  --aq-success-600: #059669;
  --aq-success-700: #15803D;

  --aq-warning-50:  #FFFBEB;
  --aq-warning-500: #F59E0B;
  --aq-warning-600: #D97706;
  --aq-warning-700: #B45309;

  --aq-danger-50:   #FEF2F2;
  --aq-danger-500:  #EF4444;
  --aq-danger-600:  #DC2626;
  --aq-danger-700:  #B91C1C;

  --aq-info-50:   #EBF6FE;
  --aq-info-500:  #1E9FF2;
  --aq-info-700:  #0369A1;

  /* ── Radii ───────────────────────────────────────────────── */
  --aq-r-xs:  4px;
  --aq-r-sm:  6px;
  --aq-r-md:  8px;   /* buttons, nav items, small chips */
  --aq-r-lg:  10px;  /* inputs, selects */
  --aq-r-xl:  12px;  /* modals, dropdowns, alerts */
  --aq-r-2xl: 16px;  /* cards, panels */

  /* ── Shadows ─────────────────────────────────────────────── */
  --aq-shadow-card: 0 1px 2px rgba(15,26,42,.04), 0 4px 12px -2px rgba(15,26,42,.06);
  --aq-shadow-elev: 0 8px 24px -8px rgba(12,132,209,.25), 0 2px 4px -1px rgba(15,26,42,.06);
  --aq-shadow-focus: 0 0 0 4px rgba(30,159,242,.15);

  /* ── Modal / Form design system (golden payment-modal values) ─── */
  --aq-modal-ink:          #0a1628;
  --aq-modal-ink-2:        #2a3548;
  --aq-modal-muted:        #8a95a5;
  --aq-modal-surface:      #ffffff;
  --aq-modal-surface-tint: #f4f7fc;
  --aq-modal-border-soft:  #eef0f5;
  --aq-modal-border:       #e8e9ec;
  --aq-modal-accent:       #1e9ff2;
  --aq-modal-accent-2:     #0d85d4;
  --aq-modal-danger:       #ea5455;
  --aq-modal-radius:       16px;
  --aq-modal-btn-radius:   10px;
  --aq-modal-ring:         0 0 0 3px rgba(30,159,242,.15);
  --aq-modal-elev:         0 20px 60px rgba(10,22,40,.15), 0 8px 24px rgba(10,22,40,.1);
  --aq-modal-font:         'DM Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* ── Spacing scale (4-pt base) ───────────────────────────── */
  --aq-sp-1: 4px;
  --aq-sp-2: 8px;
  --aq-sp-3: 12px;
  --aq-sp-4: 16px;
  --aq-sp-5: 20px;
  --aq-sp-6: 24px;
  --aq-sp-8: 32px;

  /* ── Typography ──────────────────────────────────────────── */
  --aq-font-body:  'IBM Plex Sans Arabic', Inter, system-ui, sans-serif;
  --aq-font-latin: 'Inter', system-ui, sans-serif;
  --aq-font-mono:  'JetBrains Mono', ui-monospace, monospace;
}