/*
 * Design tokens: the only place raw colors, fonts and sizes live.
 * Source: reference config/settings_data.json, cross-checked with computed styles on the Shopify design reference.
 * Mobile values first; desktop overrides at 769px (same breakpoint as the reference).
 */
:root {
  /* Brand (ResellStreet). Sand is never text on a light background (2.2:1): only behind navy text, or as text on navy. */
  --brand-navy: #1c253b;
  --brand-sand: #c1a584;
  --brand-bg: #fafafa;

  /* Colors */
  --color-bg: var(--brand-bg);
  --color-surface: #ffffff;           /* cards, fields, checkout form column: white on the #fafafa page */
  --color-text: var(--brand-navy);
  --color-text-muted: color-mix(in srgb, var(--brand-navy) 70%, #ffffff); /* #606676: ≥ 5.1:1 on white, #fafafa and the sand band */
  --color-accent: var(--brand-sand);
  --color-on-accent: var(--brand-navy); /* text on sand: 6.6:1 */
  --color-price: var(--brand-navy);
  --color-savings: #c20000;           /* red only for sale prices / "Save X%" */
  --color-border: #e3e4e8;
  --color-button: var(--brand-navy);
  --color-button-text: #ffffff;
  --color-button-hover: var(--brand-sand);
  --color-button-hover-text: var(--brand-navy);
  --color-sale-tag: var(--brand-sand);
  --color-sale-tag-text: var(--brand-navy);
  --color-cart-dot: var(--brand-sand);
  --color-variant-selected: var(--brand-sand);
  --color-variant-selected-text: var(--brand-navy);
  --color-small-image-bg: #ffffff;
  --color-large-image-bg: #000000;
  --color-header: var(--brand-bg);
  --color-header-text: var(--brand-navy);
  --color-announcement: var(--brand-sand);
  --color-announcement-text: var(--brand-navy);
  --color-footer: var(--brand-navy);
  --color-footer-text: #ffffff;
  --color-footer-link: var(--brand-sand); /* 6.6:1 on navy */
  --color-footer-border: rgb(255 255 255 / 0.16);
  --color-drawer: #ffffff;
  --color-drawer-text: var(--brand-navy);
  --color-drawer-border: #e3e4e8;
  --color-drawer-button: var(--brand-navy);
  --color-drawer-button-text: #ffffff;
  --color-overlay: #e6e6e6;
  --overlay-opacity: 0.6;
  --color-image-overlay: #697565;
  --color-grid-tint: #697565;
  --grid-tint-opacity: 0.1;
  --color-section-alt: color-mix(in srgb, var(--brand-sand) 14%, #ffffff); /* testimonials band: light sand */
  --color-section-alt-text: var(--brand-navy);
  --color-on-image: #ffffff;          /* hero text over photos */
  --color-focus: var(--brand-navy);
  --color-star: var(--color-text);
  --color-star-empty: var(--color-border);
  --color-stock-ok: #56ad6a;
  --color-stock-ok-text: color-mix(in srgb, var(--color-stock-ok) 70%, #000); /* 5.2:1 on white (the dot colour is 2.8:1) */
  --color-stock-low: #ee9441;
  --color-stock-out: var(--brand-navy); /* red is reserved for sale prices */
  --shadow-dropdown: 0 10px 20px rgb(0 0 0 / 0.09);
  --shadow-bar: 0 -6px 20px rgb(0 0 0 / 0.06);
  --shadow-card: 0 10px 30px rgb(0 0 0 / 0.08);
  --shadow-search: 0 15px 45px rgb(0 0 0 / 0.1);

  /* Checkout (settings_data.json checkout_*: Shopify-checkout look) */
  --checkout-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --checkout-accent: var(--brand-navy);
  --checkout-button: var(--brand-navy);
  --checkout-button-text: #ffffff;
  --checkout-sidebar: var(--brand-bg);
  --checkout-error: #ff6d6d;
  /* #ff6d6d is too light for text on white (≈2.6:1): darken it for messages (≈5:1) */
  --checkout-error-text: color-mix(in srgb, var(--checkout-error) 68%, #000);
  /* Invalid-field ring = --checkout-error at 18%. Plain rgba on purpose: Stripe copies this box-shadow into its card
     form, and its Appearance API rejects color-mix() (computed as color(srgb …)). Keep in sync with --checkout-error. */
  --checkout-error-ring: rgba(255, 109, 109, 0.18);
  --checkout-border: #dedede;
  --checkout-muted: #707070;
  --checkout-field-muted: #ededed;
  --checkout-muted-on-field: color-mix(in srgb, var(--checkout-muted) 88%, #000); /* 5:1 on the grey field (muted is 4.2:1) */
  --checkout-radius: 5px;

  /* Customer account (same Shopify-account look as the checkout) */
  --account-bg: var(--checkout-sidebar);
  --account-card-radius: 8px;
  --radius-sheet: 12px;           /* size guide sheet / modal */
  /* Order status pills: text ≥ 4.5:1 on their tint */
  --status-success: #1a7f43;
  --status-success-bg: #e3f4e9;
  --status-progress: #8a5300;
  --status-progress-bg: #fdf0d5;
  --status-neutral: #4d4d4d;
  --status-neutral-bg: #ededed;
  --status-critical: #b42318;
  --status-critical-bg: #fde7e5;

  /* Fonts */
  --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* 800 only, like the ResellStreet logo */
  --font-body: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --fw-heading: 800;
  --fw-body: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  /* Type scale (base 18px, header base 36px) */
  --fs-base: 16.56px;          /* 18 × 0.92 */
  --lh-base: 1.4;
  --ls-base: 0.025em;
  --fs-small: 15.3px;          /* 18 × 0.85: footer, secondary text */
  --fs-xsmall: 12.6px;         /* 18 × 0.7: copyright, fine print */
  /* Montserrat 800 is much wider than the reference's Tenor Sans: sizes × 0.88 */
  --fs-h1: 27px;
  --fs-h2: 23px;
  --fs-h3: 19.5px;
  --lh-heading: 1.1;
  --ls-heading: 0.04em;
  --fs-label: 13.25px;         /* uppercase spaced labels (footer titles) */
  --fs-nav: 16px;
  --fs-drawer-nav: 18.2px;
  --fs-announcement: 12.15px;
  --fs-button: 13px;
  --fs-collection-title: 16px;
  --ls-wide: 0.2em;            /* nav, announcement */
  --ls-wider: 0.3em;           /* buttons, labels */

  /* Product page (design v2: reference/product-v2) */
  --fs-product-title: 24px;
  --swatch-size: 60px;
  --option-h: 48px;              /* size buttons */
  --atc-h: 52px;                 /* quantity stepper + add to cart */
  --accordion-width: 800px;
  --product-section-gap: 56px;   /* accordions → reviews */
  --color-bar-track: #edebe7;    /* rating bars */
  --color-option-disabled: #a3a6ae; /* sold-out size text (crossed out) */

  /* Product card (homepage v2 design) */
  --fs-card-brand: 11px;
  --ls-card-brand: 0.22em;

  /* Homepage v2 (reference/homepage-v2): mobile values, desktop below */
  --fs-display: 38px;          /* hero title */
  --fs-banner: 34px;           /* full-width banner title */
  --fs-split-title: 30px;      /* image + text title */
  --fs-section-title: 22px;    /* "New arrivals", "Shop by brand"… */
  --fs-eyebrow: 12px;          /* small spaced line above titles */
  --fs-home-text: 16px;        /* hero/banner body text */
  --home-width: 1200px;
  --home-section-pad: 56px;
  --color-hero-overlay: var(--brand-navy); /* image overlays; strength = Customizer % (opacity) */

  /* Layout */
  --page-width: 1500px;
  --page-gutter: 17px;
  --section-space: 40px;
  --home-section-space: 40px;
  --grid-gap: 10px;

  /* Header */
  --header-pad-y: 7px;
  --logo-w-mobile: 170px;      /* all three overridden inline from the Customizer */
  --logo-w-desktop: 220px;
  --footer-logo-h: 24px;
  --icon-size: 30px;
  --icon-weight: 2px;          /* stroke in a 64-unit viewBox */

  /* Buttons (angled = skewed parallelogram) */
  --btn-pad-y: 9px;
  --btn-pad-x: 17px;
  --btn-skew: -12deg;

  /* Drawers */
  --drawer-width: 350px;
  --ease-drawer: cubic-bezier(0.165, 0.84, 0.44, 1);
  --dur-drawer: 0.45s;

  --radius: 0;
}

@media (min-width: 769px) {
  :root {
    --fs-base: 18px;
    --fs-h1: 32px;
    --fs-h2: 27px;
    --fs-h3: 20.5px;
    --fs-label: 14.4px;
    --fs-announcement: 13.77px;
    --fs-button: 14px;
    --fs-collection-title: 20px;
    --page-gutter: 40px;
    --section-space: 60px;
    --home-section-space: 75px;
    --fs-product-title: 32px;
    --product-section-gap: 101px;
    --fs-display: 80px;
    --fs-banner: 68px;
    --fs-split-title: 52px;
    --fs-section-title: 32px;
    --fs-home-text: 18px;
    --home-section-pad: 101px;
    --grid-gap: 20px;
    --header-pad-y: 20px;
    --icon-size: 28px;
    --btn-pad-y: 11px;
    --btn-pad-x: 20px;
  }
}