/* ============================================================
   XONAM DESIGN SYSTEM — Colors & Typography (v2)
   Primary: #086cc8 (logo blue) | Accent: #fe1c52 (logo red)
   Font: Nunito (Google Fonts — closest to logo letterforms)
   ============================================================ */

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

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {

  /* ── Primary Blue (from logo "O") ── */
  --color-blue-900: #054d8f;
  --color-blue-800: #066ab8;
  --color-blue-700: #086cc8;   /* PRIMARY ★ */
  --color-blue-600: #2181d8;
  --color-blue-500: #549bd8;   /* wordmark blue */
  --color-blue-400: #7db6e5;
  --color-blue-300: #a8cef0;
  --color-blue-200: #cce2f8;
  --color-blue-100: #e8f3fd;
  --color-blue-50:  #f4f9ff;   /* app bg */

  /* ── Accent Red (logo "!") ── */
  --color-red-700:  #c4003d;
  --color-red-600:  #e0064e;
  --color-red-500:  #fe1c52;   /* ACCENT ★ */
  --color-red-400:  #ff5580;
  --color-red-300:  #ff8fab;
  --color-red-100:  #fde8ee;
  --color-red-50:   #fff4f7;

  /* ── Secondary Purple (UI legacy — keep for gradient references) ── */
  --color-purple:     #7C4DFF;
  --color-purple-light: #EDE7F6;

  /* ── Neutrals ── */
  --color-dark:     #1A1A2E;
  --color-gray-600: #4b5563;
  --color-gray-500: #6b7280;
  --color-gray-400: #9ca3af;
  --color-gray-300: #d1d5db;
  --color-gray-200: #e5e7eb;
  --color-gray-100: #f3f4f6;
  --color-gray-50:  #f9fafb;
  --color-white:    #ffffff;

  /* ── Status Colors ── */
  --color-status-pending:       #F59E0B;
  --color-status-pending-bg:    #FFF8E1;
  --color-status-inprogress:    #2196F3;
  --color-status-inprogress-bg: #E3F2FD;
  --color-status-done:          #4CAF50;
  --color-status-done-bg:       #E8F5E9;
  --color-status-rejected:      #EF4444;
  --color-status-rejected-bg:   #FEE2E2;

  /* ── Semantic ── */
  --brand-primary:   #086cc8;
  --brand-light:     #549bd8;
  --brand-accent:    #fe1c52;
  --brand-gradient:  linear-gradient(135deg, #086cc8, #2181d8);
  --brand-gradient-cta: linear-gradient(90deg, #086cc8, #fe1c52);

  --bg-app:       #f4f9ff;
  --bg-card:      #ffffff;
  --bg-active:    #e8f3fd;
  --bg-surface:   #eaf4fe;

  --border-default: #cce2f8;
  --border-focus:   #086cc8;
  --border-top:     #ddeffe;

  --text-primary:   #1A1A2E;
  --text-secondary: #6b7280;
  --text-tertiary:  #9ca3af;
  --text-brand:     #086cc8;
  --text-accent:    #fe1c52;
  --text-on-brand:  #ffffff;

  --shadow-card:   0 2px 8px rgba(8,108,200,0.10);
  --shadow-button: 0 6px 16px rgba(8,108,200,0.35);
  --shadow-nav:    0 -4px 12px rgba(8,108,200,0.08);

  /* ── ODDH Card Gradients ── */
  --gradient-1: linear-gradient(135deg,#FF9800,#F57C00);
  --gradient-2: linear-gradient(135deg,#086cc8,#2181d8);
  --gradient-3: linear-gradient(135deg,#E91E63,#C2185B);
  --gradient-4: linear-gradient(135deg,#00BCD4,#0097A7);
  --gradient-5: linear-gradient(135deg,#4CAF50,#388E3C);
  --gradient-6: linear-gradient(135deg,#FF5722,#E64A19);

  /* ============================================================
     TYPOGRAPHY — Nunito / Nunito Sans
     ============================================================ */
  --font-display: 'Nunito', sans-serif;
  --font-body:    'Nunito Sans', sans-serif;
  --font-mono:    'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  22px;
  --text-3xl:  26px;
  --text-4xl:  32px;

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-body:   22px;

  /* ============================================================
     SPACING & SHAPE
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --tabbar-height: 60px;
  --tabbar-bg:     #ffffff;
}

/* ── Semantic type styles ── */
h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-black); color: var(--brand-primary); }
h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-extrabold); color: var(--text-primary); }
h3 { font-family: var(--font-display); font-size: var(--text-xl);  font-weight: var(--weight-bold); color: var(--text-primary); }
p  { font-family: var(--font-body);    font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--text-primary); line-height: var(--leading-body); }
.label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.caption { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); }