/* ================================================================
   RxMisr — Egyptian Drug Index
   Tokens. Hybrid: M3 Expressive structure + Al Saydaly navy/cyan
   palette + Cairo / Manrope typography.
   ================================================================ */

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

:root {
  /* ─── Brand (from Al Saydaly logo) ───────────────────────── */
  --navy-50:  #EFF3FB;
  --navy-100: #D6E0F3;
  --navy-200: #A9BEE3;
  --navy-300: #7A9AD1;
  --navy-400: #4772B9;
  --navy-500: #2957A1;
  --navy-600: #1E4A91;  /* primary */
  --navy-700: #183C77;
  --navy-800: #132E5C;
  --navy-900: #0E2242;

  --cyan-50:  #ECF8FD;
  --cyan-100: #C9ECFA;
  --cyan-200: #95D9F4;
  --cyan-400: #3FBBE8;
  --cyan-500: #16AEE5;  /* accent */
  --cyan-600: #0E8FBF;
  --cyan-700: #0B7099;

  /* Slate neutrals */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-150: #E8EEF5;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Semantic */
  --red-50: #FEF2F2; --red-200: #FECACA; --red-600: #DC2626; --red-800: #991B1B;
  --amber-50: #FFFBEB; --amber-200: #FDE68A; --amber-600: #D97706; --amber-800: #92400E;
  --green-50: #ECFDF5; --green-200: #A7F3D0; --green-600: #059669; --green-800: #065F46;

  /* Category palette (M3 Expressive — friendly but anchored) */
  --cat-pink:   #F4A8B8;
  --cat-coral:  #F6A68A;
  --cat-amber:  #F2C56B;
  --cat-mint:   #9BD7B7;
  --cat-teal:   #7DCBC8;
  --cat-sky:    #95C9EE;
  --cat-violet: #B8A4DD;
  --cat-rose:   #E8A7C8;

  --cat-pink-fg:   #6B1F30;
  --cat-coral-fg:  #6E2A12;
  --cat-amber-fg:  #5C3F0A;
  --cat-mint-fg:   #0F4A2D;
  --cat-teal-fg:   #0C3F3D;
  --cat-sky-fg:    #143E62;
  --cat-violet-fg: #2F2057;
  --cat-rose-fg:   #5C1E45;

  /* ─── Light theme (default) ──────────────────────────────── */
  --bg:           #F6F8FC;
  --surface:      #FFFFFF;
  --surface-low:  #F1F5F9;
  --surface-high: #FFFFFF;
  --on-surface:   #0F172A;
  --on-surface-2: #475569;
  --on-surface-3: #64748B;
  --on-surface-4: #94A3B8;
  --outline:      #E2E8F0;
  --outline-2:    #CBD5E1;
  --primary:      var(--navy-600);
  --on-primary:   #FFFFFF;
  --primary-container: #DEE7F7;
  --on-primary-container: #0E2242;
  --accent:       var(--cyan-500);
  --accent-container: var(--cyan-50);
  --on-accent-container: var(--cyan-700);
  --scrim:        rgba(15,23,42,0.45);

  /* ─── Type ───────────────────────────────────────────────── */
  --font-en: 'Manrope', system-ui, sans-serif;
  --font-ar: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;

  /* M3 Expressive radii — softer */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* Elevations (M3 — very subtle) */
  --e1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.04);
  --e2: 0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --e3: 0 8px 24px rgba(15,23,42,.10);
}

[data-theme="dark"] {
  --bg:           #0B1424;
  --surface:      #131F36;
  --surface-low:  #0F1A2E;
  --surface-high: #1A2944;
  --on-surface:   #F1F5F9;
  --on-surface-2: #CBD5E1;
  --on-surface-3: #94A3B8;
  --on-surface-4: #64748B;
  --outline:      #243556;
  --outline-2:    #34507C;
  --primary:      #A9BEE3;
  --on-primary:   #0E2242;
  --primary-container: #1A3669;
  --on-primary-container: #D6E0F3;
  --accent:       var(--cyan-400);
  --accent-container: #0B3A55;
  --on-accent-container: var(--cyan-200);

  --cat-pink:   #5C2738;
  --cat-coral:  #5E2C18;
  --cat-amber:  #4F3812;
  --cat-mint:   #1A4A33;
  --cat-teal:   #15403E;
  --cat-sky:    #1B3F62;
  --cat-violet: #322857;
  --cat-rose:   #4E2243;

  --cat-pink-fg:   #F4C9D2;
  --cat-coral-fg:  #F6CCB8;
  --cat-amber-fg:  #F2DBA1;
  --cat-mint-fg:   #B7E5CB;
  --cat-teal-fg:   #A8DAD7;
  --cat-sky-fg:    #B7D6EE;
  --cat-violet-fg: #CFC2E7;
  --cat-rose-fg:   #E8C3D8;
}

/* ─── Base ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #f0eee9;
  font-family: var(--font-en);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The android frame's inner content */
.app {
  background: var(--bg);
  color: var(--on-surface);
  height: 100%;
  width: 100%;
  font-family: var(--font-en);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "ss01", "ss02";
}

.app[dir="rtl"] {
  font-family: var(--font-ar);
  line-height: 1.7;
}

.num-tabular { font-variant-numeric: tabular-nums; }

/* Material 3 state layers (hover/press feedback) */
.m3-press {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.m3-press::after {
  content: "";
  position: absolute; inset: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms cubic-bezier(.2,.8,.2,1);
}
.m3-press:hover::after { opacity: .06; }
.m3-press:active::after { opacity: .12; }

/* Hide scrollbars inside artboards */
.app::-webkit-scrollbar { width: 0; }
.app { scrollbar-width: none; }

/* ─── Common ─────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--outline);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--outline);
  background: var(--surface);
  color: var(--on-surface-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.chip[data-active="true"] {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: transparent;
}

.divider {
  height: 1px;
  background: var(--outline);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0 !important;
    transition-duration: 0 !important;
  }
}