/*
 * Miraat·dweb — custom CSS layered on top of Tailwind.
 * Brand tokens, typography defaults, and small component-level overrides.
 * Tailwind itself is loaded either via Play CDN (dev) or a built file (prod).
 */

:root {
  --brand-primary:    #0F6E56;
  --brand-primary-2:  #1D9E75;
  --brand-primary-50: #E1F5EE;
  --brand-gold:       #C9A843;
  --neutral-bg:       #FAFAF7;
  --neutral-surface:  #FFFFFF;
  --neutral-border:   #E8E6DF;
  --text-primary:     #141816;
  --text-secondary:   #5A5F5C;
  --text-muted:       #8B8F8C;
  --success:          #16A34A;
  --warning:          #D97706;
  --danger:           #DC2626;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--neutral-bg);
}

body.font-arabic { font-family: 'Tajawal', 'Inter', system-ui, sans-serif; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; letter-spacing: -0.01em; }
code, pre { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Markdown blocks rendered by Parsedown — used in Phase 3+ */
.prose-skill h2 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.prose-skill h3 { font-size: 1.05rem; font-weight: 600; margin: 1.2rem 0 .4rem; }
.prose-skill p  { margin: .75rem 0; color: var(--text-primary); }
.prose-skill ul, .prose-skill ol { margin: .75rem 0 .75rem 1.25rem; }
.prose-skill code { background: #F3F2EE; padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.prose-skill pre  { background: #14181614; padding: 12px 14px; border-radius: 8px; overflow-x: auto; font-size: .875rem; line-height: 1.55; }
.prose-skill pre code { background: transparent; padding: 0; }
.prose-skill a { color: var(--brand-primary); text-decoration: underline; }

/* Skip link visible on focus */
.skip-link:focus { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* Selection */
::selection { background: var(--brand-primary-50); color: var(--text-primary); }