/*
 * component-theme-tokens-fix.css
 *
 * ROOT CAUSE: the Shopify "Dawn" theme this site was converted from does
 * NOT define its color/spacing/border/shadow custom properties (the
 * --color-foreground, --buttons-radius, --inputs-border-width, etc.
 * "design tokens" that base.css and every component stylesheet rely on
 * via var(...) / calc(...)) inside any .css file. Dawn generates them at
 * runtime from the merchant's theme-editor settings, via an inline
 * <style>:root{...} block that Shopify injects into <head> from
 * layout/theme.liquid. That generation step has no Laravel/Blade
 * equivalent in this project, so EVERY one of those ~230 custom
 * properties is undefined here -- not just for one component.
 *
 * The effect is silent and inconsistent: a browser treats var(undefined)
 * inside calc()/rgba() as an invalid value and drops the whole
 * declaration, so some elements quietly lose their color, others lose a
 * border or shadow, and some (like the header search flyout) end up
 * with a broken calc() for their height/position and collapse or render
 * off-screen. It looks like scattered small bugs but it is one gap.
 *
 * FIX: this file defines the same custom properties, using Dawn's own
 * out-of-the-box default preset values (config/settings_data.json /
 * settings_schema.json in the Dawn theme source), reproducing the exact
 * formulas layout/theme.liquid uses to turn those settings into CSS. It
 * must load BEFORE base.css and the vendor component stylesheets, since
 * they all read these variables.
 *
 * This restores Dawn's untouched default look (square corners, thin
 * subtle borders, no drop shadows, standard color scheme roles). If the
 * merchant had customized these in the original Shopify theme editor
 * (brand-specific radii, shadows, or the exact color-scheme palette),
 * matching that exactly isn't possible from the converted files alone --
 * only this project's own hardcoded colors elsewhere on the page (which
 * are untouched by this file) reflect real brand choices. These tokens
 * are good candidates to expose later as editable fields in the admin
 * Settings module, so far this only covers General/Contact/Social/SEO.
 */

:root,
.color-scheme-1 {
    --color-background: 255, 255, 255;
    --gradient-background: #ffffff;
    --color-background-contrast: 191, 191, 191;
    --color-foreground: 18, 18, 18;
    --color-shadow: 18, 18, 18;
    --color-button: 18, 18, 18;
    --color-button-text: 255, 255, 255;
    --color-secondary-button: 255, 255, 255;
    --color-secondary-button-text: 18, 18, 18;
    --color-link: 18, 18, 18;
    --color-badge-foreground: 18, 18, 18;
    --color-badge-background: 255, 255, 255;
    --color-badge-border: 18, 18, 18;
    --payment-terms-background-color: rgb(255, 255, 255);
}

.color-scheme-2 {
    --color-background: 243, 243, 243;
    --gradient-background: #f3f3f3;
    --color-background-contrast: 182, 182, 182;
    --color-foreground: 18, 18, 18;
    --color-shadow: 18, 18, 18;
    --color-button: 18, 18, 18;
    --color-button-text: 243, 243, 243;
    --color-secondary-button: 243, 243, 243;
    --color-secondary-button-text: 18, 18, 18;
    --color-link: 18, 18, 18;
    --color-badge-foreground: 18, 18, 18;
    --color-badge-background: 243, 243, 243;
    --color-badge-border: 18, 18, 18;
    --payment-terms-background-color: rgb(243, 243, 243);
}

.color-scheme-3 {
    --color-background: 36, 40, 51;
    --gradient-background: #242833;
    --color-background-contrast: 60, 64, 75;
    --color-foreground: 255, 255, 255;
    --color-shadow: 18, 18, 18;
    --color-button: 255, 255, 255;
    --color-button-text: 0, 0, 0;
    --color-secondary-button: 36, 40, 51;
    --color-secondary-button-text: 255, 255, 255;
    --color-link: 255, 255, 255;
    --color-badge-foreground: 255, 255, 255;
    --color-badge-background: 36, 40, 51;
    --color-badge-border: 255, 255, 255;
    --payment-terms-background-color: rgb(36, 40, 51);
}

.color-scheme-4 {
    --color-background: 18, 18, 18;
    --gradient-background: #121212;
    --color-background-contrast: 130, 130, 130;
    --color-foreground: 255, 255, 255;
    --color-shadow: 18, 18, 18;
    --color-button: 255, 255, 255;
    --color-button-text: 18, 18, 18;
    --color-secondary-button: 18, 18, 18;
    --color-secondary-button-text: 255, 255, 255;
    --color-link: 255, 255, 255;
    --color-badge-foreground: 255, 255, 255;
    --color-badge-background: 18, 18, 18;
    --color-badge-border: 255, 255, 255;
    --payment-terms-background-color: rgb(18, 18, 18);
}

.color-scheme-5 {
    --color-background: 51, 79, 180;
    --gradient-background: #334fb4;
    --color-background-contrast: 38, 59, 135;
    --color-foreground: 255, 255, 255;
    --color-shadow: 18, 18, 18;
    --color-button: 255, 255, 255;
    --color-button-text: 51, 79, 180;
    --color-secondary-button: 51, 79, 180;
    --color-secondary-button-text: 255, 255, 255;
    --color-link: 255, 255, 255;
    --color-badge-foreground: 255, 255, 255;
    --color-badge-background: 51, 79, 180;
    --color-badge-border: 255, 255, 255;
    --payment-terms-background-color: rgb(51, 79, 180);
}

:root {
    /* Typography scale (kept at 1 = no scaling; font-family/weight left
       alone since this project already renders body/heading fonts fine
       through its own CSS and did not previously depend on these). */
    --font-body-scale: 1;
    --font-heading-scale: 1;

    /* Media (images/video frames) */
    --media-padding: 0px;
    --media-border-opacity: 0.05;
    --media-border-width: 1px;
    --media-radius: 0px;
    --media-shadow-opacity: 0;
    --media-shadow-horizontal-offset: 0px;
    --media-shadow-vertical-offset: 4px;
    --media-shadow-blur-radius: 5px;
    --media-shadow-visible: 0;

    /* Page layout */
    --page-width: 120rem;
    --page-width-margin: 0rem;

    /* Product cards */
    --product-card-image-padding: 0rem;
    --product-card-corner-radius: 0rem;
    --product-card-text-alignment: left;
    --product-card-border-width: 0rem;
    --product-card-border-opacity: 0.1;
    --product-card-shadow-opacity: 0;
    --product-card-shadow-visible: 0;
    --product-card-shadow-horizontal-offset: 0rem;
    --product-card-shadow-vertical-offset: 0.4rem;
    --product-card-shadow-blur-radius: 0.5rem;

    /* Collection cards */
    --collection-card-image-padding: 0rem;
    --collection-card-corner-radius: 0rem;
    --collection-card-text-alignment: left;
    --collection-card-border-width: 0rem;
    --collection-card-border-opacity: 0.1;
    --collection-card-shadow-opacity: 0;
    --collection-card-shadow-visible: 0;
    --collection-card-shadow-horizontal-offset: 0rem;
    --collection-card-shadow-vertical-offset: 0.4rem;
    --collection-card-shadow-blur-radius: 0.5rem;

    /* Blog cards */
    --blog-card-image-padding: 0rem;
    --blog-card-corner-radius: 0rem;
    --blog-card-text-alignment: left;
    --blog-card-border-width: 0rem;
    --blog-card-border-opacity: 0.1;
    --blog-card-shadow-opacity: 0;
    --blog-card-shadow-visible: 0;
    --blog-card-shadow-horizontal-offset: 0rem;
    --blog-card-shadow-vertical-offset: 0.4rem;
    --blog-card-shadow-blur-radius: 0.5rem;

    --badge-corner-radius: 4rem;

    /* Popups (search modal, quick add, etc.) */
    --popup-border-width: 1px;
    --popup-border-opacity: 0.1;
    --popup-corner-radius: 0px;
    --popup-shadow-opacity: 0.05;
    --popup-shadow-horizontal-offset: 0px;
    --popup-shadow-vertical-offset: 4px;
    --popup-shadow-blur-radius: 5px;

    /* Drawers (cart, menu) */
    --drawer-border-width: 1px;
    --drawer-border-opacity: 0.1;
    --drawer-shadow-opacity: 0;
    --drawer-shadow-horizontal-offset: 0px;
    --drawer-shadow-vertical-offset: 4px;
    --drawer-shadow-blur-radius: 5px;

    /* Section / grid spacing */
    --spacing-sections-desktop: 0px;
    --spacing-sections-mobile: 0px;
    --grid-desktop-vertical-spacing: 8px;
    --grid-desktop-horizontal-spacing: 8px;
    --grid-mobile-vertical-spacing: 4px;
    --grid-mobile-horizontal-spacing: 4px;

    /* Text boxes / rich text sections */
    --text-boxes-border-opacity: 0.1;
    --text-boxes-border-width: 0px;
    --text-boxes-radius: 0px;
    --text-boxes-shadow-opacity: 0;
    --text-boxes-shadow-visible: 0;
    --text-boxes-shadow-horizontal-offset: 0px;
    --text-boxes-shadow-vertical-offset: 4px;
    --text-boxes-shadow-blur-radius: 5px;

    /* Buttons */
    --buttons-radius: 0px;
    --buttons-radius-outset: 0px;
    --buttons-border-width: 1px;
    --buttons-border-opacity: 1;
    --buttons-shadow-opacity: 0;
    --buttons-shadow-visible: 0;
    --buttons-shadow-horizontal-offset: 0px;
    --buttons-shadow-vertical-offset: 4px;
    --buttons-shadow-blur-radius: 5px;
    --buttons-border-offset: 0px;

    /* Inputs (search box, form fields) */
    --inputs-radius: 0px;
    --inputs-border-width: 1px;
    --inputs-border-opacity: 0.55;
    --inputs-shadow-opacity: 0;
    --inputs-shadow-horizontal-offset: 0px;
    --inputs-margin-offset: 0px;
    --inputs-shadow-vertical-offset: 4px;
    --inputs-shadow-blur-radius: 5px;
    --inputs-radius-outset: 0px;

    /* Variant pills (size/color swatches) */
    --variant-pills-radius: 40px;
    --variant-pills-border-width: 1px;
    --variant-pills-border-opacity: 0.55;
    --variant-pills-shadow-opacity: 0;
    --variant-pills-shadow-horizontal-offset: 0px;
    --variant-pills-shadow-vertical-offset: 4px;
    --variant-pills-shadow-blur-radius: 5px;
}
