/**
 * base.css — Design System Foundation
 * TradeUp BC — Homepage Redesign v2
 *
 * Contents:
 *  1. CSS Custom Properties (Brand Tokens)
 *  2. CSS Reset & Box Model
 *  3. Scrollbar
 *  4. Typography Base
 *  5. Global Layout Utilities
 *  6. Responsive Helpers
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Rubik:wght@500;600;700;800&display=swap');


/* =============================================================================
   1. CSS CUSTOM PROPERTIES — BRAND TOKENS
   ============================================================================= */

:root {
    /* ---- Brand Palette ---- */
    --c-red:        #962D00;   /* Primary accent — headings, highlights */
    --c-green-dk:   #004B37;   /* Darkest green — nav bg, footer bg */
    --c-green-md:   #006E51;   /* Medium green — borders, icons */
    --c-green-lt:   #32A07D;   /* Light green — hover states, checkmarks */
    --c-green-xs:   #58D4B0;   /* Lightest green — subtle accents */
    --c-gold:       #E8C650;   /* Gold — primary CTA buttons */
    --c-gold-dk:    #C88819;   /* Dark gold — borders, depth */
    --c-gold-xdk:   #A86800;   /* Darker gold — text on gold */
    --c-blue:       #005C99;   /* Links */

    /* ---- Neutrals ---- */
    --c-black:      #000000;
    --c-dark:       #3C413F;   /* Body text */
    --c-gray:       #7C8482;   /* Muted text */
    --c-gray-lt:    #C2CAC8;   /* Borders, dividers */
    --c-gray-bg:    #F4F5F5;   /* Light section backgrounds */
    --c-white:      #FFFFFF;

    /* ---- Typography ---- */
    --font-heading: 'Rubik', sans-serif;
    --font-body:    'Barlow Semi Condensed', sans-serif;

    /* ---- Font Sizes ---- */
    --text-xs:   0.75rem;   /*  12px */
    --text-sm:   0.875rem;  /*  14px */
    --text-base: 1rem;      /*  16px */
    --text-md:   1.125rem;  /*  18px */
    --text-lg:   1.25rem;   /*  20px */
    --text-xl:   1.375rem;  /*  22px */
    --text-2xl:  1.5rem;    /*  24px */
    --text-3xl:  2rem;      /*  32px */
    --text-4xl:  2.5rem;    /*  40px */
    --text-5xl:  3rem;      /*  48px */
    --text-6xl:  3.5rem;    /*  56px */

    /* ---- Spacing Scale ---- */
    --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 */

    /* ---- Section Padding ---- */
    --section-py:    var(--space-20);   /* 80px top/bottom */
    --section-py-md: var(--space-16);   /* 64px — tablet */
    --section-py-sm: var(--space-10);   /* 40px — mobile */

    /* ---- Layout ---- */
    --container-max:  1320px;
    --container-pad:  1.25rem;   /* 20px side padding */
    --grid-gap:       1.5rem;    /* 24px standard grid gap */

    /* ---- Border Radius ---- */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;

    /* ---- Shadows ---- */
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.18);
    --shadow-card: 0 0 4px rgba(0,0,0,0.21);

    /* ---- Transitions ---- */
    --ease:       all 250ms ease-in-out;
    --ease-fast:  all 150ms ease-in-out;
    --ease-slow:  all 400ms ease-in-out;
}


/* =============================================================================
   2. CSS RESET & BOX MODEL
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--c-dark);
    background-color: var(--c-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-dark);
}

p {
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--c-dark);
    margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

a {
    color: var(--c-blue);
    text-decoration: none;
    transition: var(--ease);
}

a:hover { color: var(--c-red); }

img, svg {
    display: block;
    max-width: 100%;
}

ul, ol { list-style: none; }

button {
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    background: transparent;
}

input, textarea, select {
    font-family: var(--font-body);
}

figure { margin: 0; }


/* =============================================================================
   3. SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb  { background: var(--c-dark); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-gold-dk); }
::-webkit-scrollbar-track  { background: #CAD0CF; }


/* =============================================================================
   4. TYPOGRAPHY BASE
   ============================================================================= */

.v2-text-xs   { font-size: var(--text-xs); }
.v2-text-sm   { font-size: var(--text-sm); }
.v2-text-base { font-size: var(--text-base); }
.v2-text-md   { font-size: var(--text-md); }
.v2-text-lg   { font-size: var(--text-lg); }
.v2-text-xl   { font-size: var(--text-xl); }
.v2-text-2xl  { font-size: var(--text-2xl); }
.v2-text-3xl  { font-size: var(--text-3xl); }
.v2-text-4xl  { font-size: var(--text-4xl); }

.v2-font-body    { font-family: var(--font-body); }
.v2-font-heading { font-family: var(--font-heading); }

.v2-weight-400 { font-weight: 400; }
.v2-weight-500 { font-weight: 500; }
.v2-weight-600 { font-weight: 600; }
.v2-weight-700 { font-weight: 700; }

.v2-uppercase { text-transform: uppercase; }


/* =============================================================================
   5. GLOBAL LAYOUT UTILITIES
   ============================================================================= */

/* Container */
.v2-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    position: relative;
}

/* Section spacing */
.v2-section {
    padding-block: var(--section-py);
    position: relative;
}

.v2-section--white  { background-color: var(--c-white); }
.v2-section--gray   { background-color: var(--c-gray-bg); }
.v2-section--dark   { background-color: var(--c-green-dk); }
.v2-section--red    { background-color: var(--c-red); }
.v2-section--gold   { background-color: var(--c-gold); }

/* Text alignment utilities */
.v2-text-left   { text-align: left; }
.v2-text-center { text-align: center; }
.v2-text-right  { text-align: right; }

/* Display utilities */
.v2-d-flex       { display: flex; }
.v2-d-grid       { display: grid; }
.v2-d-none       { display: none; }
.v2-d-block      { display: block; }

.v2-align-center { align-items: center; }
.v2-align-start  { align-items: flex-start; }
.v2-justify-center   { justify-content: center; }
.v2-justify-between  { justify-content: space-between; }
.v2-flex-wrap    { flex-wrap: wrap; }
.v2-gap-4  { gap: var(--space-4); }
.v2-gap-6  { gap: var(--space-6); }
.v2-gap-8  { gap: var(--space-8); }
.v2-gap-10 { gap: var(--space-10); }

/* Color utilities */
.v2-color-red      { color: var(--c-red); }
.v2-color-green    { color: var(--c-green-dk); }
.v2-color-gold     { color: var(--c-gold); }
.v2-color-white    { color: var(--c-white); }
.v2-color-dark     { color: var(--c-dark); }
.v2-color-gray     { color: var(--c-gray); }


/* =============================================================================
   6. RESPONSIVE HELPERS
   ============================================================================= */

/* Mobile-first breakpoints */

/* sm: 576px */
@media (max-width: 575px) {
    :root {
        --section-py: var(--section-py-sm);
        --container-pad: 1rem;
    }
}

/* md: 768px */
@media (max-width: 767px) {
    :root { --section-py: var(--section-py-md); }
}

/* Hide/show at breakpoints */
@media (min-width: 993px) {
    .v2-hide-desktop { display: none !important; }
}

@media (max-width: 992px) {
    .v2-hide-mobile { display: none !important; }
}