/* ==========================================================================
   DESIGN TOKENS
   Values are taken verbatim from docs/architecture/20-design-system.md.
   Do not introduce ad-hoc colours in components - add a token here instead.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- surfaces (20 §2) ------------------------------------------------ */
  --surface-canvas:  #FAF8F5;   /* warm paper */
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #F2EEE8;
  --surface-overlay: #FFFFFF;

  --border-subtle: #E6E0D6;
  --border-strong: #C9C0B2;

  --text-primary:   #1A1815;
  --text-secondary: #5A5348;
  --text-muted:     #8B8172;
  --text-inverse:   #FAF8F5;

  /* ---- heritage ------------------------------------------------------- */
  --heritage-gold:      #B08D3F;
  --heritage-gold-soft: #E3D5B0;
  --heritage-deep:      #1F3A34;   /* deep green-teal */
  --heritage-deep-soft: #2E5049;

  /* ---- identity (never the only signal - always paired with text) ------ */
  --identity-male:         #2F5D8C;
  --identity-male-wash:    #EAF1F8;
  --identity-female:       #9C4A63;
  --identity-female-wash:  #FAEDF1;
  --identity-unknown:      #6B6459;

  /* ---- status --------------------------------------------------------- */
  --status-verified:   #2E6F4E;
  --status-partial:    #7A6A2F;
  --status-pending:    #B4801F;
  --status-unverified: #6B6459;
  --status-deceased:   #6E4B4B;   /* muted, respectful - never bright red */
  --status-error:      #A8332C;
  --status-info:       #2F5D8C;

  /* ---- typography ----------------------------------------------------- */
  --font-display: 'Lora', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Urdu stacks. Nastaliq for names/display, Naskh for dense UI (19 §5).
     Self-hosted subsets are declared in fonts.css; these system faces are the
     documented fallback so Urdu is NEVER rendered in a Latin fallback font. */
  --font-display-ur: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq',
                     'Awami Nastaliq', 'Noto Naskh Arabic', 'Segoe UI', serif;
  --font-body-ur:    'Noto Naskh Arabic', 'Segoe UI', 'Tahoma', 'Arial', sans-serif;

  --text-display: 3rem;     /* 48px */
  --text-h1:      2.125rem; /* 34px */
  --text-h2:      1.625rem; /* 26px */
  --text-h3:      1.25rem;  /* 20px */
  --text-body:    1.0625rem;/* 17px - deliberately larger than typical */
  --text-small:   0.9375rem;/* 15px */
  --text-caption: 0.8125rem;/* 13px */

  --lh-display: 1.15;
  --lh-h1: 1.2;  --lh-h2: 1.3;  --lh-h3: 1.4;
  --lh-body: 1.6; --lh-small: 1.5; --lh-caption: 1.4;

  /* ---- spacing (4px base) --------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* ---- radius / elevation --------------------------------------------- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-full: 9999px;

  --shadow-1: 0 1px 2px rgba(26,24,21,.06), 0 1px 3px rgba(26,24,21,.04);
  --shadow-2: 0 2px 6px rgba(26,24,21,.07), 0 4px 12px rgba(26,24,21,.05);
  --shadow-3: 0 8px 24px rgba(26,24,21,.10), 0 2px 8px rgba(26,24,21,.06);
  --shadow-gold: 0 2px 16px rgba(176,141,63,.18);

  /* ---- gradients (used sparingly, on heritage surfaces only) ---------- */
  --grad-heritage: linear-gradient(155deg, #1F3A34 0%, #24443C 45%, #16302B 100%);
  --grad-gold:     linear-gradient(120deg, #B08D3F 0%, #D8BC72 50%, #B08D3F 100%);
  --grad-veil:     linear-gradient(180deg, rgba(31,58,52,0) 0%, rgba(31,58,52,.85) 100%);

  /* ---- motion --------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;

  /* ---- layout --------------------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --header-h: 68px;
}

/* ---- dark theme (20 §2 second column) --------------------------------- */
:root[data-theme="dark"] {
  --surface-canvas:  #0F1113;
  --surface-raised:  #171A1D;
  --surface-sunken:  #0A0C0E;
  --surface-overlay: #1E2226;
  --border-subtle: #2A2F35;
  --border-strong: #3D444C;
  --text-primary:   #F2EFE9;
  --text-secondary: #A9A296;
  --text-muted:     #6F6A62;
  --text-inverse:   #0F1113;
  --identity-male:        #7BA7D4;
  --identity-male-wash:   #16222E;
  --identity-female:      #DE95AC;
  --identity-female-wash: #2A1A20;
  --identity-unknown:     #9A9287;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,.45);
  --shadow-3: 0 10px 28px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-canvas:  #0F1113;
    --surface-raised:  #171A1D;
    --surface-sunken:  #0A0C0E;
    --surface-overlay: #1E2226;
    --border-subtle: #2A2F35;
    --border-strong: #3D444C;
    --text-primary:   #F2EFE9;
    --text-secondary: #A9A296;
    --text-muted:     #6F6A62;
    --text-inverse:   #0F1113;
    --identity-male:        #7BA7D4;
    --identity-male-wash:   #16222E;
    --identity-female:      #DE95AC;
    --identity-female-wash: #2A1A20;
    --identity-unknown:     #9A9287;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 2px 8px rgba(0,0,0,.45);
    --shadow-3: 0 10px 28px rgba(0,0,0,.55);
  }
}

/* ---- Urdu locale: larger sizes + looser leading (19 §4, 20 §3) -------- */
:root[lang="ur"], [lang="ur"] {
  --text-display: 2.5rem;
  --text-h1: 1.75rem;
  --text-h2: 1.375rem;
  --text-h3: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --lh-display: 1.5; --lh-h1: 1.55; --lh-h2: 1.6;
  --lh-h3: 1.7; --lh-body: 1.9; --lh-small: 1.8; --lh-caption: 1.75;
  --font-display: var(--font-display-ur);
  --font-body: var(--font-body-ur);
}