/* =============================================================================
   Siraj Design Tokens - Grounded in Android Source Truth
   Unified design tokens matching Siraj Android (Classic Medina Green, 
   Shapes, Typography, Surfaces, AMOLED True Black, Logical Spacing)
   ============================================================================= */

:root {
  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --font-arabic: "Amiri", "Traditional Arabic", "Scheherazade New", serif;

  /* Classic Palette - Light (Medina Green) */
  --primary: #059669;
  --primary-light: #10B981;
  --primary-tint: #D1FAE5;
  --primary-ink: #064E3B;
  --on-primary: #FFFFFF;

  --secondary: #10B981;
  --secondary-tint: #ECFDF5;
  --secondary-ink: #064E3B;

  /* Surfaces & Canvas - Light */
  --bg: #F9FAFB;
  --bg-alt: #F3F4F6;
  --surface: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-hover: #F9FAFB;
  --surface-elevated: #FFFFFF;

  /* Ink & Typography Colors - Light */
  --ink: #111827;
  --ink-soft: #4B5563;
  --ink-muted: #6B7280;
  --ink-faint: #9CA3AF;

  /* Borders & Dividers - Light */
  --border: #E5E7EB;
  --border-subtle: #F3F4F6;
  --border-strong: #D1D5DB;

  /* Shapes & Radii (Android Material 3 Keylines) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 40px -10px rgba(5, 150, 105, 0.25);

  /* Animation & Easing */
  --easing: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index layers */
  --z-base: 1;
  --z-nav: 100;
  --z-modal: 500;
  --z-toast: 1000;
}

/* Dark Mode - Grounded in Android Theme */
html[data-theme="dark"] {
  --primary: #34D399;
  --primary-light: #6EE7B7;
  --primary-tint: #064E3B;
  --primary-ink: #A7F3D0;
  --on-primary: #062E22;

  --secondary: #064E3B;
  --secondary-tint: #064E3B;
  --secondary-ink: #A7F3D0;

  --bg: #09090B;
  --bg-alt: #121215;
  --surface: #18181B;
  --surface-card: #18181B;
  --surface-hover: #222226;
  --surface-elevated: #27272A;

  --ink: #F4F4F5;
  --ink-soft: #A1A1AA;
  --ink-muted: #71717A;
  --ink-faint: #52525B;

  --border: #27272A;
  --border-subtle: #1F1F23;
  --border-strong: #3F3F46;

  --shadow-glow: 0 0 40px -10px rgba(52, 211, 153, 0.2);
}

/* Pure AMOLED Black Mode */
html[data-theme="black"],
html[data-amoled="true"][data-theme="dark"],
html[data-amoled="true"] {
  --bg: #000000;
  --bg-alt: #000000;
  --surface: #000000;
  --surface-card: #050505;
  --surface-hover: #0a0a0a;
  --surface-elevated: #0d0d0d;

  --border: #1a1a1a;
  --border-subtle: #111111;
  --border-strong: #242424;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.85);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.92);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.98);
  --shadow-glow: 0 0 35px -5px rgba(52, 211, 153, 0.25);
}