/* ==========================================================================
   JobNest Rider — Brand design tokens
   Single source of truth for colours, typography, spacing, radii and shadows.
   Change brand values here only; all other stylesheets reference these.
   ========================================================================== */

:root {
    /* ---- Brand colours (JobNest Rider App identity) ---- */
    --color-primary: #FFCC00;          /* Primary Brand Yellow */
    --color-primary-hover: #F2C200;
    --color-primary-ink: #7A5C00;      /* Accessible yellow-family text on light backgrounds */
    --color-dark: #1A1A1A;             /* Main Dark */
    --color-dark-2: #2B2B2B;           /* Secondary Dark */
    --color-white: #FFFFFF;
    --color-light: #F8F9FA;            /* Light Background */
    --color-primary-soft: #FFF8D6;     /* Light Yellow */
    --color-border: #E2E8F0;           /* Border Grey */
    --color-text: #1A1A1A;
    --color-text-muted: #64748B;       /* Secondary Text */
    --color-text-on-dark: #F1F5F9;
    --color-text-muted-on-dark: #A3AAB5;
    --color-logo-bg: #EFB604;         /* Background colour of the official logo artwork */

    /* ---- Status colours ---- */
    --color-success: #2ECC71;
    --color-success-ink: #1E8449;
    --color-success-soft: #E8F8EF;
    --color-warning: #E8590C;
    --color-warning-soft: #FDEEE5;
    --color-error: #EB445A;
    --color-error-ink: #C0263B;
    --color-error-soft: #FDECEE;

    /* ---- Translucent helpers ---- */
    --color-primary-a10: rgba(255, 204, 0, 0.10);
    --color-primary-a20: rgba(255, 204, 0, 0.20);
    --color-primary-a35: rgba(255, 204, 0, 0.35);
    --color-white-a06: rgba(255, 255, 255, 0.06);
    --color-white-a10: rgba(255, 255, 255, 0.10);
    --color-white-a16: rgba(255, 255, 255, 0.16);
    --color-dark-a06: rgba(26, 26, 26, 0.06);

    /* ---- Gradients ---- */
    --gradient-brand: linear-gradient(135deg, #FFD633 0%, var(--color-primary) 55%, #F5B800 100%);
    --gradient-dark: linear-gradient(160deg, var(--color-dark-2) 0%, var(--color-dark) 60%, #111111 100%);
    --gradient-hero: radial-gradient(1100px 520px at 85% 10%, var(--color-primary-soft) 0%, rgba(255, 248, 214, 0) 70%),
                     linear-gradient(180deg, var(--color-white) 0%, var(--color-light) 100%);

    /* ---- Typography ---- */
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 0.9375rem;
    --fs-md: 0.97rem;
    --fs-lg: 1.06rem;
    --fs-h3: clamp(0.96rem, 0.9rem + 0.27vw, 1.06rem);
    --fs-h2: clamp(1.32rem, 1rem + 1.3vw, 1.95rem);
    --fs-h1: clamp(1.65rem, 1.12rem + 2.33vw, 2.75rem);
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --lh-tight: 1.15;
    --lh-base: 1.65;

    /* ---- Spacing & layout ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --section-pad: clamp(3.25rem, 2.5rem + 3.2vw, 5.5rem);
    --container-narrow: 860px;
    --header-height: 72px;

    /* ---- Radii ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
    --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.28);
    --shadow-brand: 0 12px 28px -10px rgba(255, 204, 0, 0.65);
    --shadow-phone: 0 40px 80px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;

    /* ---- Logo ---- */
    --logo-height: 48px;               /* Official logo badge size in the header */
    --logo-height-mobile: 42px;

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 160ms;
    --dur: 280ms;
    --dur-slow: 700ms;
}