/**
 * GoodSalla Design Tokens
 *
 * All CSS custom properties (design tokens) for the GoodSalla brand system.
 * Based on the confirmed Stitch design brief:
 *   - Primary blue:   #0074d9
 *   - Accent green:   #9edc29
 *   - Olive heading:  #455627
 *   - Accent yellow:  #ffdc00
 *   - Headings:       Cormorant Garamond
 *   - Body:           Inter
 *
 * NOTE: These tokens are a structural placeholder pending full Stitch design
 * approval. Once Stitch screens are approved, update the values in this file.
 * Do NOT override tokens inline in other CSS files — update only here.
 *
 * @package GoodSalla
 */

:root {

    /* ─── Brand Colors ────────────────────────────────────────────────────────── */
    --gs-color-primary:           #0074d9;   /* Primary blue — CTA buttons, links */
    --gs-color-primary-hover:     #005fad;   /* Darkened primary for hover states */
    --gs-color-primary-light:     #e6f2fd;   /* Very light blue tint — backgrounds */

    --gs-color-accent:            #9edc29;   /* Accent green — badges, highlights */
    --gs-color-accent-hover:      #82b820;
    --gs-color-accent-light:      #f3fbe3;

    --gs-color-heading:           #455627;   /* Deep olive — all headings */

    --gs-color-yellow:            #ffdc00;   /* Accent yellow — campaign, sale */
    --gs-color-yellow-dark:       #e6c600;

    /* ─── Neutral / Base ─────────────────────────────────────────────────────── */
    --gs-color-white:             #ffffff;
    --gs-color-off-white:         #fafaf8;   /* Subtle warm off-white for page bg */
    --gs-color-surface:           #f5f5f3;   /* Card / section backgrounds */
    --gs-color-border:            #e8e6e0;   /* Default border color */
    --gs-color-border-strong:     #cbc8c0;

    --gs-color-gray-100:          #f5f4f1;
    --gs-color-gray-200:          #e8e6e0;
    --gs-color-gray-300:          #d1cec7;
    --gs-color-gray-400:          #a8a49c;
    --gs-color-gray-500:          #7a766d;   /* Muted text */
    --gs-color-gray-600:          #5a5651;
    --gs-color-gray-700:          #3d3a35;   /* Body text */
    --gs-color-gray-800:          #2a2824;
    --gs-color-gray-900:          #1a1815;   /* Near black */

    /* ─── Semantic Colors ────────────────────────────────────────────────────── */
    --gs-color-text:              #3d3a35;   /* Default body text */
    --gs-color-text-muted:        #7a766d;   /* Secondary text, metadata */
    --gs-color-text-inverse:      #ffffff;

    --gs-color-success:           #28a745;
    --gs-color-success-light:     #d4edda;
    --gs-color-error:             #dc3545;
    --gs-color-error-light:       #f8d7da;
    --gs-color-warning:           #ffc107;
    --gs-color-warning-light:     #fff3cd;
    --gs-color-info:              #17a2b8;
    --gs-color-info-light:        #d1ecf1;

    /* ─── Sale / Discount ────────────────────────────────────────────────────── */
    --gs-color-sale:              #e63946;   /* Sale price and discount badges */
    --gs-color-sale-bg:           #fdecea;

    /* ─── Stock Status ────────────────────────────────────────────────────────── */
    --gs-color-in-stock:          #28a745;
    --gs-color-low-stock:         #fd7e14;
    --gs-color-out-of-stock:      #dc3545;

    /* ─── Typography ─────────────────────────────────────────────────────────── */
    --gs-font-heading:            'EB Garamond', Georgia, 'Times New Roman', serif;
    --gs-font-body:               'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --gs-font-mono:               'Courier New', monospace;

    /* Font sizes — fluid scale */
    --gs-text-xs:                 0.75rem;    /* 12px */
    --gs-text-sm:                 0.875rem;   /* 14px */
    --gs-text-base:               1rem;       /* 16px */
    --gs-text-md:                 1.125rem;   /* 18px */
    --gs-text-lg:                 1.25rem;    /* 20px */
    --gs-text-xl:                 1.5rem;     /* 24px */
    --gs-text-2xl:                1.875rem;   /* 30px */
    --gs-text-3xl:                2.25rem;    /* 36px */
    --gs-text-4xl:                2.75rem;    /* 44px */
    --gs-text-5xl:                3.5rem;     /* 56px */

    /* Font weights */
    --gs-font-light:              300;
    --gs-font-normal:             400;
    --gs-font-medium:             500;
    --gs-font-semibold:           600;
    --gs-font-bold:               700;

    /* Line heights */
    --gs-leading-tight:           1.25;
    --gs-leading-snug:            1.375;
    --gs-leading-normal:          1.5;
    --gs-leading-relaxed:         1.625;
    --gs-leading-loose:           2;

    /* ─── Spacing Scale (4px base) ───────────────────────────────────────────── */
    --gs-space-1:                 0.25rem;    /* 4px */
    --gs-space-2:                 0.5rem;     /* 8px */
    --gs-space-3:                 0.75rem;    /* 12px */
    --gs-space-4:                 1rem;       /* 16px */
    --gs-space-5:                 1.25rem;    /* 20px */
    --gs-space-6:                 1.5rem;     /* 24px */
    --gs-space-8:                 2rem;       /* 32px */
    --gs-space-10:                2.5rem;     /* 40px */
    --gs-space-12:                3rem;       /* 48px */
    --gs-space-16:                4rem;       /* 64px */
    --gs-space-20:                5rem;       /* 80px */
    --gs-space-24:                6rem;       /* 96px */

    /* ─── Layout ─────────────────────────────────────────────────────────────── */
    --gs-container-max:           1280px;
    --gs-container-padding:       var(--gs-space-6);  /* Horizontal padding */
    --gs-header-height:           72px;
    --gs-header-height-mobile:    60px;
    --gs-product-card-radius:     12px;

    /* ─── Border Radius ──────────────────────────────────────────────────────── */
    --gs-radius-sm:               4px;
    --gs-radius-md:               8px;
    --gs-radius-lg:               12px;
    --gs-radius-xl:               16px;
    --gs-radius-2xl:              24px;
    --gs-radius-full:             9999px;

    /* ─── Shadows ─────────────────────────────────────────────────────────────── */
    --gs-shadow-xs:               0 1px 2px rgba(0, 0, 0, 0.05);
    --gs-shadow-sm:               0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --gs-shadow-md:               0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --gs-shadow-lg:               0 10px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
    --gs-shadow-xl:               0 20px 40px rgba(0, 0, 0, 0.12);
    --gs-shadow-card-hover:       0 8px 24px rgba(0, 116, 217, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

    /* ─── Transitions ────────────────────────────────────────────────────────── */
    --gs-transition-fast:         150ms ease;
    --gs-transition-base:         200ms ease;
    --gs-transition-slow:         300ms ease;
    --gs-transition-bounce:       300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-Index Scale ──────────────────────────────────────────────────────── */
    --gs-z-base:                  0;
    --gs-z-above:                 10;
    --gs-z-dropdown:              100;
    --gs-z-sticky:                200;
    --gs-z-overlay:               300;
    --gs-z-drawer:                400;
    --gs-z-modal:                 500;
    --gs-z-toast:                 600;
}