/* ==========================================================
   variables.css
   All design tokens in one place. Change here to update
   every component that references these variables.
   Part of: Mohammed Shehzad Khan Portfolio v2.0
========================================================== */

:root {

    /* ── Colour ─────────────────────────────────────────── */
    --bg:              #F8FAFC;
    --bg-surface:      #FFFFFF;
    --bg-alt:          #F1F5F9;

    --text:            #111827;
    --text-secondary:  #374151;
    --text-muted:      #4B5563;

    --accent:          #1E3A5F;
    --accent-gradient: #2B5C8A;
    --accent-soft:     rgba(30,58,95,.08);
    --accent-tint:     #EFF6FF;
    --warm-accent:     #C47A3A;

    --border:          #E5E7EB;
    --border-strong:   #64748B;

    /* ── Layout ─────────────────────────────────────────── */
    --container:       1120px;
    --header-height:   72px;

    /* ── Radii ───────────────────────────────────────────── */
    --radius-sm:       8px;
    --radius-lg:       16px;

    /* ── Spacing scale (8px base) ───────────────────────── */
    /* Tokenised in Stage 4 (VISUAL_IDENTITY.md §5) so rhythm
       stays consistent across components and sections. */
    --space-1:         0.5rem;   /* 8px  */
    --space-2:         1rem;     /* 16px */
    --space-3:         1.5rem;   /* 24px */
    --space-4:         2rem;     /* 32px */
    --space-5:         3rem;     /* 48px */
    --space-6:         4rem;     /* 64px */
    --space-7:         6rem;     /* 96px */
    --space-8:         8rem;     /* 128px */
    --section-py:      112px;    /* desktop section padding */
    --section-py-mobile: 80px;   /* ≤900px section padding */

    /* ── Animation ───────────────────────────────────────── */
    --transition:      300ms cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ── Shadows ─────────────────────────────────────────── */
    /* Extracted from inline rgba() values repeated across card
       components. Changing one token updates every card. */
    --shadow-card:       0 4px 20px rgba(17,24,39,0.05);
    --shadow-card-hover: 0 16px 32px rgba(17,24,39,0.1);
    --shadow-subtle:     0 4px 12px -1px rgba(17,24,39,0.04);
}