/* ==========================================================================
   01-tokens.css  --  the ONLY file with raw colour/size/font literals.
   Re-skinning for Shared Chemistry = editing this file. Nothing else.

   The palette here is deliberately NEUTRAL (ink/slate + one accent). It is not
   derived from any third-party storefront; only structural metrics
   (breakpoints, grid counts, control heights) come from the reference capture.
   ========================================================================== */

:root {
    /* ---- brand ------------------------------------------------------- */
    --scs-accent:          #6d28d9;   /* primary action / brand accent      */
    --scs-accent-hover:    #5b21b6;
    --scs-accent-soft:     #f3effc;
    --scs-accent-contrast: #ffffff;

    --scs-sale:            #b42318;   /* sale price + sale badge            */
    --scs-sale-soft:       #fef3f2;
    --scs-success:         #067647;
    --scs-warning:         #b54708;

    /* ---- neutrals ---------------------------------------------------- */
    --scs-ink:             #101828;   /* primary text                       */
    --scs-ink-2:           #344054;   /* secondary text                     */
    --scs-ink-3:           #667085;   /* muted / meta                       */
    --scs-line:            #e4e7ec;   /* borders                            */
    --scs-line-strong:     #d0d5dd;
    --scs-surface:         #ffffff;
    --scs-surface-2:       #f9fafb;   /* page background                    */
    --scs-surface-3:       #f2f4f7;   /* subtle fills                       */
    --scs-inverse:         #0c111d;   /* preheader / footer ground          */
    --scs-inverse-ink:     #e7eaf0;

    /* ---- typography -------------------------------------------------- */
    --scs-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --scs-font-head: var(--scs-font-body);

    --scs-fs-xs:   0.6875rem;  /* 11px  badges, preheader                   */
    --scs-fs-sm:   0.8125rem;  /* 13px  meta, card price note               */
    --scs-fs-base: 0.9375rem;  /* 15px  body                                */
    --scs-fs-md:   1.0625rem;  /* 17px  lead                                */
    --scs-fs-lg:   1.375rem;   /* 22px  section headings                    */
    --scs-fs-xl:   1.75rem;    /* 28px  page heading                        */
    --scs-fs-2xl:  2.25rem;    /* 36px  hero                                */

    --scs-lh-tight: 1.2;
    --scs-lh-base:  1.55;

    --scs-fw-normal: 400;
    --scs-fw-medium: 500;
    --scs-fw-bold:   700;

    /* ---- spacing scale (4px base) ------------------------------------ */
    --scs-1:  0.25rem;
    --scs-2:  0.5rem;
    --scs-3:  0.75rem;
    --scs-4:  1rem;
    --scs-5:  1.25rem;
    --scs-6:  1.5rem;
    --scs-8:  2rem;
    --scs-10: 2.5rem;
    --scs-12: 3rem;
    --scs-16: 4rem;

    /* ---- layout ------------------------------------------------------ */
    --scs-container:     1360px;  /* matches reference max content width    */
    --scs-container-pad: var(--scs-4);
    --scs-gutter:        var(--scs-5);

    /* Product grid columns per breakpoint (reference behaviour). */
    --scs-grid-cols: 2;

    /* ---- shape / depth ----------------------------------------------- */
    --scs-radius-sm: 4px;
    --scs-radius:    8px;
    --scs-radius-lg: 14px;
    --scs-radius-pill: 999px;

    --scs-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --scs-shadow:    0 2px 8px rgba(16, 24, 40, .08);
    --scs-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

    /* ---- controls ---------------------------------------------------- */
    --scs-control-h:    44px;   /* touch-target floor                      */
    --scs-control-h-sm: 36px;
    --scs-focus-ring:   0 0 0 3px color-mix(in srgb, var(--scs-accent) 35%, transparent);

    /* ---- motion ------------------------------------------------------ */
    --scs-t-fast: 120ms ease;
    --scs-t:      200ms ease;

    /* ---- chrome heights (used for sticky offsets) -------------------- */
    --scs-preheader-h: 34px;
    --scs-header-h:    72px;

    --scs-z-header: 100;
    --scs-z-mega:   120;
    --scs-z-drawer: 200;
    --scs-z-overlay: 190;
}

/* Responsive grid density -- the reference storefront steps 2 -> 3 -> 4 -> 5. */
@media (min-width: 600px)  { :root { --scs-grid-cols: 3; } }
@media (min-width: 900px)  { :root { --scs-grid-cols: 4; --scs-container-pad: var(--scs-6); } }
@media (min-width: 1280px) { :root { --scs-grid-cols: 5; } }

/* Larger type once there is room for it. */
@media (min-width: 900px) {
    :root {
        --scs-fs-xl:  2rem;
        --scs-fs-2xl: 3rem;
        --scs-header-h: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root { --scs-t-fast: 1ms; --scs-t: 1ms; }
}