/**
 * ═══════════════════════════════════════════════════════════
 * Design Tokens — CSS Custom Properties
 * Santosh Poudel Portfolio
 * ═══════════════════════════════════════════════════════════
 *
 * All design decisions live here as named tokens.
 * Never use raw values (hex codes, pixel numbers) directly
 * in other CSS files — always reference a token.
 *
 * Load order: this file must be loaded FIRST.
 * ═══════════════════════════════════════════════════════════
 */

:root {

    /* ── Color Palette ──────────────────────────────────────── */

    /* Backgrounds */
    --color-bg:          #FFFFFF;          /* Page background — pure white */
    --color-surface:     #F8F9FA;          /* Card, section alt backgrounds */
    --color-surface-2:   #F1F3F5;          /* Deeper surface (nested cards) */

    /* Borders */
    --color-border:      #E5E7EB;          /* Default border */
    --color-border-light:#F3F4F6;          /* Subtle dividers */

    /* Text */
    --color-text:        #1A1D23;          /* Dark charcoal — primary text */
    --color-text-muted:  #6B7280;          /* Secondary / supporting text */
    --color-text-light:  #9CA3AF;          /* Placeholder, disabled */
    --color-text-invert: #FFFFFF;          /* Text on dark backgrounds */

    /* Accent — restrained professional blue */
    --color-accent:       #2563EB;
    --color-accent-hover: #1D4ED8;
    --color-accent-light: #EFF6FF;         /* Accent tint for backgrounds */
    --color-accent-border:#BFDBFE;         /* Accent-tinted border */

    /* Semantic */
    --color-success:     #16A34A;
    --color-error:       #DC2626;
    --color-warning:     #D97706;

    /* ── Typography ─────────────────────────────────────────── */

    --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Type scale (Major Third — 1.25 ratio, adjusted for readability) */
    --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 */
    --text-5xl:   3rem;          /*  48px */
    --text-6xl:   3.75rem;       /*  60px */

    /* Font weights */
    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Line heights */
    --leading-tight:  1.2;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed:1.625;
    --leading-loose:  1.75;

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0em;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;

    /* ── Spacing Scale ───────────────────────────────────────── */
    /* Based on a 4px grid */

    --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 */
    --space-20:  5rem;       /*  80px */
    --space-24:  6rem;       /*  96px */
    --space-32:  8rem;       /* 128px */

    /* ── Layout ─────────────────────────────────────────────── */

    --container-max:     1200px;
    --container-padding: var(--space-6);   /* Horizontal padding on mobile */
    /* Mirrors the container's real gutter; bumped to --space-8 at >=1280px
       in responsive.css. Used by full-bleed bands to align their text with
       the normal content column. */
    --container-gutter:  var(--space-6);

    /* Section vertical rhythm.
       --section-scale tightens the gap between every section site-wide.
       1 = the original spacing, 0.4 = the current tightened setting.
       Change this ONE number to loosen or tighten the whole site. */
    --section-scale: 0.4;
    --section-padding-y: calc(var(--space-24) * var(--section-scale));

    /* ── Borders & Radius ────────────────────────────────────── */

    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;   /* Pill shape */

    /* ── Shadows ─────────────────────────────────────────────── */
    /* Soft, neutral shadows — not too heavy */

    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06),
                   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08),
                   0 2px 4px  rgba(0, 0, 0, 0.04);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.10),
                   0 4px 8px  rgba(0, 0, 0, 0.04);
    --shadow-xl:   0 16px 40px rgba(0, 0, 0, 0.12),
                   0 6px 12px rgba(0, 0, 0, 0.05);

    /* Focus ring — accessibility */
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

    /* ── Transitions ─────────────────────────────────────────── */

    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-slower: 600ms ease;

    /* ── Z-Index Layers ──────────────────────────────────────── */

    --z-below:    -1;
    --z-base:      0;
    --z-raised:    10;
    --z-nav:       100;
    --z-overlay:   200;
    --z-modal:     300;
    --z-tooltip:   400;

    /* ── Navigation ──────────────────────────────────────────── */

    --nav-height:        4rem;      /* 64px — desktop nav height */
    --nav-height-mobile: 3.5rem;    /* 56px — mobile */

    /* Actual rendered height of the fixed header. The hero offsets in
       pages.css subtract this, so it lives in one place to stop the
       four copies of "72px" drifting apart. */
    --header-height:        88px;
    --header-height-mobile: 68px;

}