/* ═══════════════════════════════════════════════════════════════
   tokens.css — Central Design Tokens
   All reusable values live here. Every other CSS file references
   these variables instead of hard-coding values.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Colors ── */
    --color-primary: #3b6fe8;
    --color-primary-hover: #2563eb;
    --color-primary-light: #dce8ff;
    --color-primary-bg: #eff4ff;
    --color-dark: #1a1a2e;
    --color-dark-bg: #111827;
    --color-yellow: #f9e26b;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-bg-page: #f5f6fa;
    --color-bg-section: #f0f2f8;
    --color-bg-card: #ffffff;
    --color-bg-card-alt: #f1f5f9;
    --color-bg-skills: #fdfdfd;
    --color-bg-input: #fafbfc;
    --color-bg-client-bar: #1a1f2e;

    --color-text-heading: #1a1a2e;
    --color-text-body: #131313b2;
    --color-text-muted: #898989;
    --color-text-label: #374151;
    --color-text-dark-body: #1e293b;
    --color-text-card-body: #64748b;

    --color-border-light: #e2e8f0;
    --color-border-input: #e2e8f0;
    --color-border-pill: #d1d5db;
    --color-border-tag: #d1d9e0;
    --color-border-marquee: #e8ecf5;
    --color-border-sidebar: #c5cfe0;

    --color-upwork-green: #22c55e;
    --color-success: #22c55e;
    --color-error: #ef4444;

    --color-placeholder: #b0bac8;
    --color-nav-link: #555555;

    --color-btn-blue: #f1ece5;

    /* ── Typography ── */
    --font-body: "Nunito Sans", sans-serif;
    --font-display: "Big Shoulders Display", sans-serif;
    --font-heading: "Kanit", sans-serif;
    --font-kanit: "Kanit", sans-serif;
    --font-inter: "inter", sans-serif;

    --font-size-xs: clamp(0.7rem, 1.5vw, 0.85rem);
    --font-size-sm: clamp(0.8rem, 1.8vw, 0.95rem);
    --font-size-base: clamp(0.9rem, 2vw, 1rem);
    --font-size-lg: clamp(1rem, 2.5vw, 1.2rem);
    --font-size-xl: clamp(1.2rem, 3vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 4vw, 2rem);
    --font-size-3xl: clamp(2rem, 5vw, 3rem);
    --font-size-hero: clamp(2.2rem, 7vw, 5.5rem);

    /* ── Spacing ── */
    --space-section-px: clamp(1rem, 8vw, 12rem);
    --space-section-py: clamp(3rem, 4vw, 6rem);
    --space-nav-gap: clamp(1rem, 4vw, 6rem);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ── Border Radius ── */
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 40px rgba(0, 0, 0, 0.01);
    --shadow-nav: 0 4px 24px rgba(59, 111, 232, 0.08);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.18);
    --shadow-blue-sm: 0 4px 12px rgba(59, 111, 232, 0.3);
    --shadow-blue-md: 0 6px 20px rgba(59, 111, 232, 0.4);
    --shadow-blue-lg: 0 6px 20px rgba(59, 111, 232, 0.45);
    --shadow-drawer: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* ── Z-Index Layers ── */
    --z-normal: 1;
    --z-elevated: 2;
    --z-nav: 1000;
    --z-hamburger: 2000;
    --z-drawer: 9999;

    /* ── Transitions ── */
    --transition-fast: 0.15s;
    --transition-base: 0.25s;
    --transition-slow: 0.35s;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Label Span Styles */
    --label-span-font-size: 20px;
    --label-span-font-weight: 700;
    --label-span-letter-spacing: 0.1em;

    /* Heading Styles */
    --heading-font-weight: 700;
    --heading-letter-spacing: 5%;
    --heading-font-size: clamp(1.8rem, 3vw, 2.75rem);
    --heading-line-height: 1.15;
    --heading-margin-bottom: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   Breakpoints Reference (cannot use CSS vars in @media)
   ───────────────────────────────────────────────────────────────
     xs  :  < 480px   (small phones)
     sm  :  480–767px (large phones)
     md  :  768–1023px (tablets)
     lg  :  1024–1279px (small laptops)
     xl  :  1280–1535px (desktops)
     2xl :  ≥ 1536px  (large screens)
   ═══════════════════════════════════════════════════════════════ */