/* ============================================================
   Design Tokens — merged Saeed brand palette + Imranlytics
   motion-ready token architecture. Dual light/dark theme.
   ============================================================ */

/* Phosphor icon fonts (local WOFF2) */
@font-face {
  font-family: 'Phosphor-Bold';
  src: url('../fonts/Phosphor-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Phosphor-Fill';
  src: url('../fonts/Phosphor-Fill.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Saeed Brand Colors ---- */
  --background: #EAEFF5;      /* Soft, glare-free cool grey background */
  --foreground: #0F172A;
  --card: #FFFFFF;            /* Pure white elevated card surfaces */
  --card-foreground: #0F172A;
  --primary: #025a8b;        /* Saeed's sky blue */
  --primary-foreground: #FFFFFF;
  --secondary: #E2E8F0;
  --secondary-foreground: #0F172A;
  --accent: #10B981;          /* Saeed's emerald */
  --accent-foreground: #052E16;
  --accent-2: #34d399;
  --warning: #F59E0B;         /* Saeed's saffron gold */
  --destructive: #EF4444;
  --success: #10B981;
  --border: #CBD5E1;
  --muted: #E2E8F0;
  --muted-foreground: #64748B;
  --ring: #025a8b;
  --radius: 0.75rem;
  --radius-lg: 1rem;

  /* ---- Page-level semantic aliases (used across interior pages) ---- */
  --ink: #0F172A;
  --ink-2: #334155;
  --ink-3: #475569;
  --ink-4: #64748B;
  --line: #CBD5E1;
  --line-2: #CBD5E1;
  --bg-card: #FFFFFF;
  --bg-soft: #E2E8F0;
  --accent-soft: rgba(16, 185, 129, 0.12);
  --shadow: 0 10px 40px -10px rgba(2, 90, 139, 0.18);

  /* ---- Typography ---- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Montserrat', var(--font-sans);
  --font-heading: 'Montserrat', var(--font-sans);

  /* ---- Spacing ---- */
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
}

.dark {
  --background: #0B0F14;
  --foreground: #F8FAFC;
  --card: #1E293B;
  --card-foreground: #F8FAFC;
  --primary: #38bdf8;
  --primary-foreground: #0F172A;
  --secondary: #1E293B;
  --secondary-foreground: #F8FAFC;
  --accent: #34d399;
  --accent-foreground: #022c22;
  --accent-2: #6ee7b7;
  --warning: #fbbf24;
  --destructive: #f87171;
  --success: #34d399;
  --border: #334155;
  --muted: #1E293B;
  --muted-foreground: #94A3B8;
  --ring: #38bdf8;

  /* Page-level semantic aliases (dark) */
  --ink: #F8FAFC;
  --ink-2: #E2E8F0;
  --ink-3: #CBD5E1;
  --ink-4: #94A3B8;
  --line: #334155;
  --line-2: #475569;
  --bg-card: #1E293B;
  --bg-soft: #263247;
  --accent-soft: rgba(52, 211, 153, 0.14);
  --shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.55);
}