/* =====================================================================
   MacLab Stores — Design Tokens
   The single source of truth for color, type, space, depth and motion.
   Light theme, dark ink on light canvas. Red + cyan are engineered
   accents, not primaries — the ink and the whitespace carry the premium.
   ===================================================================== */

:root {
    /* ---- Color: ink & surfaces (the dominant voice) ---- */
    --ink:            #0A0B0D;   /* primary text, near-black cool */
    --ink-soft:       #1C1F26;   /* headings on light */
    --graphite:       #545B69;   /* secondary text */
    --graphite-soft:  #878E9C;   /* tertiary / captions */
    --canvas:         #FFFFFF;   /* page background */
    --surface:        #F7F8FA;   /* alternating sections */
    --surface-sunk:   #EFF2F6;   /* chips, wells, tracks */
    --hairline:       #E7EAEF;   /* dividers, card borders */
    --hairline-strong:#D6DBE3;

    /* ---- Color: brand accents (used sparingly) ---- */
    --red:        #E30613;       /* commerce energy: primary CTA, deals, live */
    --red-ink:    #BE0510;       /* red hover / pressed */
    --red-wash:   #FDECEC;       /* red tint background */
    --cyan:       #00AEEF;       /* tech/interactive: links, focus, fills */
    --cyan-ink:   #0090C6;       /* cyan hover */
    --cyan-wash:  #E7F7FE;       /* cyan tint background */
    --indigo:     #0B5FFF;       /* gradient depth partner for cyan */

    /* ---- Semantic ---- */
    --success:    #12A150;
    --success-wash:#E7F6EE;
    --warning:    #C77700;
    --warning-wash:#FBF1E0;
    --danger:     #D6252B;

    /* ---- Gradients ---- */
    --grad-cyan:     linear-gradient(135deg, #00AEEF 0%, #0B5FFF 100%);
    --grad-ink:      linear-gradient(160deg, #14161C 0%, #0A0B0D 100%);
    /* Signature brand spectrum — red to cyan. Used ONCE per view, on accent. */
    --grad-spectrum: linear-gradient(90deg, #E30613 0%, #B5119E 42%, #5B54F0 68%, #00AEEF 100%);
    --glow-cyan:     radial-gradient(60% 60% at 50% 40%, rgba(0,174,239,.28), rgba(0,174,239,0) 70%);

    /* ---- Typography ---- */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --text-2xs:  0.6875rem;  /* 11 */
    --text-xs:   0.75rem;    /* 12 */
    --text-sm:   0.875rem;   /* 14 */
    --text-base: 1rem;       /* 16 */
    --text-lg:   1.125rem;   /* 18 */
    --text-xl:   1.375rem;   /* 22 */
    --text-2xl:  1.75rem;    /* 28 */
    --text-3xl:  clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
    --text-4xl:  clamp(2.6rem, 1.6rem + 4.2vw, 4rem);
    --text-hero: clamp(2.9rem, 1.4rem + 6.2vw, 5.5rem);

    --leading-tight: 1.08;
    --leading-snug:  1.28;
    --leading-body:  1.62;
    --tracking-tight: -0.02em;
    --tracking-flat:  0;
    --tracking-wide:  0.02em;
    --tracking-label: 0.14em;   /* mono eyebrows */

    /* ---- Spacing (4px base) ---- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
    --sp-9: 4rem;     --sp-10: 5rem;   --sp-12: 6rem;   --sp-14: 8rem;
    --sp-16: 10rem;

    /* ---- Radius ---- */
    --r-xs: 8px;  --r-sm: 10px; --r-md: 12px; --r-lg: 16px;
    --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

    /* ---- Depth (cool-tinted, layered — Apple-soft) ---- */
    --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
    --shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    --shadow-md: 0 4px 14px rgba(16,24,40,.08), 0 2px 5px rgba(16,24,40,.04);
    --shadow-lg: 0 14px 34px rgba(16,24,40,.10), 0 5px 10px rgba(16,24,40,.05);
    --shadow-xl: 0 26px 64px rgba(16,24,40,.14), 0 10px 18px rgba(16,24,40,.06);
    --shadow-glow: 0 10px 44px rgba(0,174,239,.26);
    --ring: 0 0 0 3px rgba(0,174,239,.35);

    /* ---- Glass ---- */
    --glass-bg: rgba(255,255,255,.72);
    --glass-border: rgba(255,255,255,.6);
    --glass-blur: saturate(180%) blur(20px);

    /* ---- Motion ---- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
    --dur-1: 0.14s; --dur-2: 0.24s; --dur-3: 0.4s; --dur-4: 0.65s;

    /* ---- Layout ---- */
    --container: 1200px;
    --container-wide: 1340px;
    --gutter: clamp(1.25rem, 5vw, 3rem);

    /* ---- Z-index ---- */
    --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 200;
    --z-overlay: 500; --z-toast: 900;
}