/* ============================================================
   Nomomail — main.css
   Design system: CSS custom properties, typography, spacing
   ============================================================ */

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

/* ── Light Theme (default) ── */
:root,
.theme-light {
  /* Primary — Indigo */
  --color-primary:       #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark:  #4f46e5;

  /* Secondary — Teal */
  --color-secondary:       #14b8a6;
  --color-secondary-light: #2dd4bf;
  --color-secondary-dark:  #0d9488;

  /* Accent — Amber */
  --color-accent: #f59e0b;

  /* Surfaces */
  --color-background: #ffffff;
  --color-surface:    #f9fafb;

  /* Text */
  --color-text:           #111827;
  --color-text-secondary: #6b7280;

  /* Borders */
  --color-border:       rgba(0, 0, 0, 0.08);
  --color-border-focus: var(--color-primary);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.25);

  /* Grid background */
  --grid-line-color: rgba(99, 102, 241, 0.06);
}

/* ── Dark Theme ── */
.theme-dark {
  /* Primary — Indigo (lighter for dark bg) */
  --color-primary:       #818cf8;
  --color-primary-light: #a5b4fc;
  --color-primary-dark:  #6366f1;

  /* Secondary — Teal */
  --color-secondary:       #2dd4bf;
  --color-secondary-light: #5eead4;
  --color-secondary-dark:  #14b8a6;

  /* Accent — Amber */
  --color-accent: #fbbf24;

  /* Surfaces */
  --color-background: #0f172a;
  --color-surface:    #1e293b;

  /* Text */
  --color-text:           #f1f5f9;
  --color-text-secondary: #94a3b8;

  /* Borders */
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-focus: var(--color-primary);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(129, 140, 248, 0.3);

  /* Grid background */
  --grid-line-color: rgba(99, 102, 241, 0.08);
}

/* ── Typography ── */
:root {
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Cairo', 'Inter', system-ui, sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  --font-light:    300;
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
}

/* ── Spacing ── */
:root {
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
}

/* ── Border Radius ── */
:root {
  --radius-sm:   0.25rem;   /* 4px  */
  --radius-md:   0.5rem;    /* 8px  */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;
}

/* ── Transitions ── */
:root {
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;
}

/* ── Base Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  transition: color var(--transition-normal), background-color var(--transition-normal);
  --grid-line-color: rgba(99, 102, 241, 0.06);
}

@keyframes grid-scroll {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: grid-scroll 6s linear infinite;
}

html::before {
  display: none;
}

/* Arabic language override */
:lang(ar) body,
body.rtl {
  font-family: var(--font-arabic);
}