/* ============================================================
   EFISHOP DESIGN TOKENS — "The Digital Curator"
   Source: Stitch project 15037352348596440558
   ============================================================ */

:root {
    /* ── Surfaces (tonal layering, no borders) ── */
    --background:                  #f9f9fb;
    --surface:                     #f9f9fb;
    --surface-bright:              #f9f9fb;
    --surface-dim:                 #d3dbe2;
    --surface-container-lowest:    #ffffff;
    --surface-container-low:       #f2f4f6;
    --surface-container:           #ebeef2;
    --surface-container-high:      #e4e9ee;
    --surface-container-highest:   #dde3e9;
    --surface-variant:             #dde3e9;
    --surface-tint:                #5e5e5e;

    /* ── Primary (machined-metal) ── */
    --primary:                     #5e5e5e;
    --primary-dim:                 #525252;
    --primary-container:           #e2e2e2;
    --primary-fixed:               #e2e2e2;
    --primary-fixed-dim:           #d4d4d4;
    --on-primary:                  #f8f8f8;
    --on-primary-container:        #525252;
    --on-primary-fixed:            #3f3f3f;
    --on-primary-fixed-variant:    #5b5b5b;
    --inverse-primary:             #ffffff;

    /* ── Secondary (Electric Blue — CRO tool) ── */
    --secondary:                   #005bc2;
    --secondary-dim:               #0050ab;
    --secondary-container:         #d8e2ff;
    --secondary-fixed:             #d8e2ff;
    --secondary-fixed-dim:         #c2d4ff;
    --on-secondary:                #f9f8ff;
    --on-secondary-container:      #004ea8;
    --on-secondary-fixed:          #003d85;
    --on-secondary-fixed-variant:  #0058bb;

    /* ── Tertiary ── */
    --tertiary:                    #5e5f63;
    --tertiary-dim:                #525357;
    --tertiary-container:          #eeedf3;
    --tertiary-fixed:              #eeedf3;
    --tertiary-fixed-dim:          #e0dfe4;
    --on-tertiary:                 #f9f8fe;
    --on-tertiary-container:       #57585d;
    --on-tertiary-fixed:           #45464a;
    --on-tertiary-fixed-variant:   #626267;

    /* ── Content / Text ── */
    --on-surface:                  #2d3338;
    --on-surface-variant:          #596065;
    --on-background:               #2d3338;
    --inverse-surface:             #0c0e10;
    --inverse-on-surface:          #9c9d9f;

    /* ── Outlines ── */
    --outline:                     #757c81;
    --outline-variant:             #acb3b8;

    /* ── Error ── */
    --error:                       #9f403d;
    --error-container:             #fe8983;
    --error-dim:                   #4e0309;
    --on-error:                    #fff7f6;
    --on-error-container:          #752121;

    /* ── Typography ── */
    --font-display:    'Manrope', system-ui, sans-serif;
    --font-headline:   'Manrope', system-ui, sans-serif;
    --font-body:       'Inter', system-ui, sans-serif;
    --font-label:      'Inter', system-ui, sans-serif;
    --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

    /* Scale — display */
    --text-display-lg:   3.5rem;   /* 56px — hero */
    --text-display-md:   2.75rem;  /* 44px */
    --text-display-sm:   2.25rem;  /* 36px */

    /* Scale — headline */
    --text-headline-lg:  2rem;     /* 32px */
    --text-headline-md:  1.5rem;   /* 24px */
    --text-headline-sm:  1.125rem; /* 18px */

    /* Max widths */
    --container-max:     1280px;
    --container-wide:    1440px;
    --container-narrow:  800px;

    /* Scale — title */
    --text-title-lg:     1.125rem; /* 18px */
    --text-title-md:     1rem;     /* 16px */
    --text-title-sm:     0.875rem; /* 14px */

    /* Scale — body */
    --text-body-lg:      1rem;     /* 16px */
    --text-body-md:      0.9375rem;/* 15px */
    --text-body-sm:      0.875rem; /* 14px */

    /* Scale — label */
    --text-label-lg:     0.875rem; /* 14px */
    --text-label-md:     0.8125rem;/* 13px */
    --text-label-sm:     0.75rem;  /* 12px */

    /* Letter spacing */
    --tracking-tight:    -0.02em;  /* display headlines */
    --tracking-normal:   0em;
    --tracking-wide:     0.05em;
    --tracking-wider:    0.1em;    /* tertiary buttons uppercase */

    /* Line heights */
    --leading-tight:     1.1;
    --leading-snug:      1.35;
    --leading-normal:    1.6;
    --leading-relaxed:   1.75;

    /* ── Spacing scale (base 4px × 3 = 12px unit) ── */
    --space-1:    4px;
    --space-2:    8px;
    --space-3:    12px;
    --space-4:    16px;
    --space-5:    20px;
    --space-6:    24px;
    --space-7:    28px;
    --space-8:    32px;
    --space-10:   40px;
    --space-12:   48px;
    --space-16:   64px;
    --space-20:   80px;
    --space-24:   96px;
    --space-32:   128px;

    /* ── Border radius ── */
    --radius-sm:    0.5rem;   /* 8px */
    --radius-md:    1rem;     /* 16px */
    --radius-lg:    2rem;     /* 32px — product cards */
    --radius-xl:    3rem;     /* 48px — bubble cards */
    --radius-full:  9999px;   /* pills: buttons, inputs */

    /* ── Shadows (ambient, felt not seen) ── */
    --shadow-ambient: 0 20px 40px rgba(45, 51, 56, 0.06);
    --shadow-ambient-lg: 0 32px 64px rgba(45, 51, 56, 0.10);
    --shadow-ambient-sm: 0 8px 24px rgba(45, 51, 56, 0.04);
    --shadow-none: none;

    /* ── Ghost border (outline_variant at 15% opacity) ── */
    --ghost-border: 1px solid rgba(172, 179, 184, 0.15);

    /* ── Glassmorphism ── */
    --glass-bg:     rgba(255, 255, 255, 0.80);
    --glass-blur:   blur(24px);
    --glass-blur-sm: blur(12px);

    /* ── Transitions ── */
    --transition-fast:   0.15s ease;
    --transition-base:   0.25s ease;
    --transition-slow:   0.4s ease;

    /* ── Z-index scale ── */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
    --z-nav:       600;
}

/* ── Gradient: machined-metal primary CTA ── */
.gradient-primary {
    background: linear-gradient(145deg, var(--primary), var(--primary-dim));
}

/* ── Gradient: electric blue secondary ── */
.gradient-secondary {
    background: linear-gradient(145deg, var(--secondary), var(--secondary-dim));
}