/* ============================================================
   NearU - Design Tokens
   SINGLE SOURCE OF TRUTH for colours, gradient, typography,
   spacing and radius. Loaded before components.css and every
   section stylesheet, so all approved sections inherit these
   values with no markup changes.

   Brand source: NearU Brand Guide (WLIA Creations, Dec 2025)
   ============================================================ */
:root {

    /* ---------- BRAND COLOURS ---------- */
    --brand-red:         #B50056;   /* Pantone Rubine Red */
    --brand-orange:      #EFA220;   /* Pantone 137        */
    --brand-red-dark:    #97004A;   /* darken for hover   */
    --brand-orange-dark: #D88E12;   /* darken for hover   */

    /* Official brand gradient (left -> right) */
    --brand-gradient:      linear-gradient(
        90deg,
        #b50056 0%,
        #d54f3b 50%,
        #efa220 100%
    );
    /* Soft tinted gradient for hero / section backgrounds */
    --brand-gradient-soft: linear-gradient(135deg, #FBEAF1 0%, #FDF6EC 60%);

    /* ---------- NEUTRALS ---------- */
    --nearu-ink:         #1A1B2E;
    /* --nearu-muted:       #5C5C6B; */
     --nearu-muted:       #2c3340;
    --nearu-border:      #ECECF1;
    --nearu-tile:        #F7F7F9;
    --nearu-tile-border: #EFEFF3;
    --nearu-card-bg:     #FFFFFF;
    --nearu-up:          #1FA971;   /* positive change badge */

    /* ---------- SOFT BACKGROUND TINTS ---------- */
    --nearu-bg-start:   #FBEAF1;
    --nearu-bg-end:     #FDF6EC;
    --nearu-mm-pink:    #FBEAF1;
    --nearu-mm-peach:   #FDF3E6;
    --nearu-connector:  #E3B9C9;

    /* ---------- LEGACY ALIASES ----------
       Approved section CSS references --nearu-primary / -accent /
       -primary-dark. Point them at the official brand colours so
       every section updates automatically - NO markup edits. */
    --nearu-primary:      var(--brand-red);
    --nearu-primary-dark: var(--brand-red-dark);
    --nearu-accent:       var(--brand-orange);

    /* ---------- BORDER RADIUS SYSTEM ---------- */
    --radius-panel: 18px;   /* section panels / large cards            */
    --radius-card:  14px;   /* hero highlights, category tiles, photos */
    --radius-inner: 10px;   /* small inner elements, badges, logo mark */
    --radius-pill:  10px;   /* buttons                                 */

    /* ---------- SPACING SYSTEM ---------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  22px;
    --space-6:  30px;
    --space-7:  40px;

    --section-pad-top: 8px;
    --section-pad-y:   40px;
    --panel-pad-y:     40px;
    --panel-pad-x:     30px;

    /* ---------- TYPOGRAPHY (Brand Guide) ----------
       Primary: Quicksand | Fallback: Open Sans */
    --font-primary: 'Quicksand', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body:    'Quicksand', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --h1-size: clamp(28px, 4.5vw, 36px);
    --h2-size: clamp(24px, 2.6vw, 28px);
    --h3-size: clamp(20px, 1.9vw, 24px);
    --body-lg: 18px;
    --body:    15px;
    --body-sm: 12px;

    --lh-tight: 1.2;
    --lh-base:  1.4;
    --lh-loose: 1.6;
}

/* ============================================================
   GLOBAL BASE TYPOGRAPHY (Quicksand everywhere)
   ============================================================ */
body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    color: var(--nearu-ink);
    line-height: var(--lh-base);
}

h1, h2, h3, h4, h5, h6,
.nearu-hero-title,
.nearu-categories-title,
.nearu-why-title,
.nearu-why-item-title,
.nearu-mymall-title,
.nearu-how-title,
.nearu-how-step-title,
.nearu-exists-title,
.nearu-faq-title,
.nearu-cta-title,
.nearu-footer-heading,
.nearu-logo-text {
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
}

.btn,
.nav-link,
.nearu-btn-primary,
.nearu-btn-outline,
.nearu-cta-btn,
.nearu-explore-link,
.nearu-faq-all {
    font-family: var(--font-primary);
}

/* ============================================================
   GLOBAL ELEMENT RESETS
   ============================================================ */
html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
}