/*
Theme Name: Sunday Afternoons
Theme URI: https://www.sundayafternoons.com/
Author: Sunday Afternoons
Author URI: https://www.sundayafternoons.com/
Description: A 1:1 WordPress + WooCommerce port of the Sunday Afternoons storefront.
  The visual system (design tokens, typography, iconography, spacing and every
  bundled asset) is carried over unchanged from the original site; the markup
  layer is re-implemented in PHP and WooCommerce so the store runs on WordPress.
  Block editor styles and WooCommerce templates included.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
License URI: https://www.sundayafternoons.com/
Text Domain: sundayafternoons
Tags: e-commerce, custom-colors, custom-menu, custom-logo, featured-images,
  full-width-template, translation-ready, block-styles, wide-blocks
WC requires at least: 8.0
WC tested up to: 9.5
*/

/* ==========================================================================
   Sunday Afternoons -- ported design system
   --------------------------------------------------------------------------
   Section 1 is the original site's custom-property set, byte-for-byte and
   under its original names.  Keep it that way: it is what lets this file be
   diffed against the live site when anything looks off.

   Section 2 aliases those tokens into the --dqt-* namespace, which only our
   own WordPress/WooCommerce bridge styles use.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reference design tokens (verbatim)
   -------------------------------------------------------------------------- */

/* Type scale */
:root {
  --text-h0: 3rem;
  --text-h1: 2.5rem;
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-h4: 1.375rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.875rem;
  --text-lg: 1.125rem;
}

/* Spacing */
:root {
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-2-5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-3-5: 0.875rem;
  --spacing-4: 1rem;
  --spacing-4-5: 1.125rem;
  --spacing-5: 1.25rem;
  --spacing-5-5: 1.375rem;
  --spacing-6: 1.5rem;
  --spacing-6-5: 1.625rem;
  --spacing-7: 1.75rem;
  --spacing-7-5: 1.875rem;
  --spacing-8: 2rem;
  --spacing-8-5: 2.125rem;
  --spacing-9: 2.25rem;
  --spacing-9-5: 2.375rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-18: 4.5rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;
}

/* Layout */
:root {
  --container-max-width: 1600px;
  --container-narrow-max-width: 1350px;
  --container-gutter: var(--spacing-5);
  --section-outer-spacing-block: var(--spacing-10);
  --section-inner-max-spacing-block: var(--spacing-9);
  --section-inner-spacing-inline: var(--container-gutter);
  --section-stack-spacing-block: var(--spacing-8);
  --grid-gutter: var(--spacing-5);
  --product-list-row-gap: var(--spacing-8);
  --product-list-column-gap: var(--grid-gutter);
  --input-gap: var(--spacing-2);
  --input-height: 2.625rem;
  --input-padding-inline: var(--spacing-4);
  --sticky-area-height: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px) + var(--sticky-header-enabled, 0) * var(--header-height, 0px));
  --transform-logical-flip: 1;
  --transform-origin-start: left;
  --transform-origin-end: right;
}

/* Typography roles */
:root {
  --heading-font-family: Saira, sans-serif;
  --heading-font-weight: 500;
  --heading-font-style: normal;
  --heading-letter-spacing: 0.0em;
  --text-font-family: Nunito, sans-serif;
  --text-font-weight: 400;
  --text-font-style: normal;
  --text-letter-spacing: 0.0em;
}

/* Colour: core */
:root {
  --accent: 63 68 68;
  --text-primary: 63 68 68;
  --background-primary: 255 255 255;
  --dialog-background: 255 255 255;
  --border-color: var(--text-color, var(--text-primary)) / 0.12;
}

/* Colour: buttons */
:root {
  --button-background-primary: 63 68 68;
  --button-text-primary: 245 245 245;
  --button-background-secondary: 63 68 68;
  --button-text-secondary: 245 245 245;
}

/* Colour: state */
:root {
  --success-background: 224 244 232;
  --success-text: 0 163 65;
  --warning-background: 255 246 233;
  --warning-text: 255 183 74;
  --error-background: 254 231 231;
  --error-text: 248 58 58;
  --on-sale-text: 248 58 58;
  --on-sale-badge-background: 248 58 58;
  --on-sale-badge-text: 255 255 255;
  --sold-out-badge-background: 0 0 0;
  --sold-out-badge-text: 255 255 255;
  --primary-badge-background: 39 121 175;
  --primary-badge-text: 255 255 255;
  --star-color: 255 183 74;
}

/* Colour: surfaces */
:root {
  --product-card-background: 255 255 255;
  --product-card-text: 63 68 68;
  --header-background: 255 255 255;
  --header-text: 63 68 68;
  --footer-background: 63 68 68;
  --footer-text: 255 255 255;
}

/* Radii */
:root {
  --rounded-xs: 0.25rem;
  --rounded-sm: 0.125rem;
  --rounded: 0.25rem;
  --rounded-lg: 0.5rem;
  --rounded-full: 9999px;
  --rounded-button: 0.375rem;
  --rounded-input: 0.375rem;
}

/* Shadows */
:root {
  --shadow-sm: 0 2px 8px rgb(var(--text-primary) / 0.1);
  --shadow: 0 5px 15px rgb(var(--text-primary) / 0.1);
  --shadow-md: 0 5px 30px rgb(var(--text-primary) / 0.1);
  --shadow-block: 0px 18px 50px rgb(var(--text-primary) / 0.1);
}

/* Assets */
:root {
  --cursor-close-svg-url: url(../svg/cursor-close.svg);
  --cursor-zoom-in-svg-url: url(../svg/cursor-zoom-in.svg);
  --cursor-zoom-out-svg-url: url(../svg/cursor-zoom-out.svg);
  --checkmark-svg-url: url(../svg/checkmark.svg);
}

/* Revenue Flare tokens */
:root {
  --rev-max-width: 1350px;
  --rev-gutter-min: 40px;
  --rev-gutter-mob: 14px;
  --rev-radius-sm: 4px;
  --rev-radius-md: 6px;
  --rev-radius-lg: 10px;
  --rev-radius-icons: 10px;
  --rev-radius-full: 999px;
  --rev-spacing-tight: 8px;
  --rev-spacing-tight-mob: 4px;
  --rev-spacing-element: 22px;
  --rev-spacing-element-mob: 16px;
  --rev-spacing-section: 50px;
  --rev-spacing-section-mob: 28px;
  --rev-swatch-accent: #2a2a2a;
  --rev-swatch-color: #ffffff;
  --rev-swatch-size: 36px;
  --rev-swatch-image-size: 40px;
  --rev-price-size: 18px;
  --rev-price-sale-color: #b91c1c;
  --rev-price-saving-background: #f5f5f5;
  --rev-price-saving-color: #2a2a2a;
  --rev-inv-accent-in-stock: #16a34a;
  --rev-inv-accent-preorder: #4b6cb7;
  --rev-inv-accent-oos: #6b7280;
  --rev-inv-accent-med: #d97706;
  --rev-inv-accent-low: #dc2626;
  --rev-review-star-color: #F1A524;
  --rev-review-star-size: 14px;
  --rev-review-pill-background: #f5f5f5;
  --rev-review-pill-color: #2a2a2a;
  --rev-prod-media-aspect-ratio: 1/1;
  --rev-card-radius: 6px;
  --rev-card-background: transparent;
  --rev-card-hover-border: #c4c4c4;
  --rev-card-justify: flex-start;
  --rev-quickview-background: #2a2a2a;
  --rev-quickview-color: #ffffff;
  --rev-min-tap-target: 24px;
  --rev-min-text-interactive: 12px;
  --rev-min-touch-gap: 8px;
  --rev-button-border-radius: 4px;
  --rev-button-font-size: 18px;
  --rev-button-font-weight: 500;
  --rev-button-subtext-size: 11px;
  --rev-button-padding-vertical: 12px;
  --rev-button-primary-bg: #3f4444;
  --rev-button-primary-color: #ffffff;
  --rev-button-primary-spin: 255, 255, 255;
  --rev-button-secondary-bg: #ffed34;
  --rev-button-secondary-color: #2a2a2a;
  --rev-button-secondary-spin: 42, 42, 42;
  --rev-button-preorder-bg: #2a2a2a;
  --rev-button-preorder-color: #ffffff;
  --rev-button-preorder-spin: 255, 255, 255;
  --rev-link-color: #2a2a2a;
  --rev-link-font-size: 14px;
  --rev-link-font-weight: 400;
  --rev-slider-arrows-background: #ffffff;
  --rev-slider-arrows-color: #2a2a2a;
  --rev-slider-indicators-color: #2a2a2a;
  --rev-slider-indicators-rgb: 42, 42, 42;
}

/* Review widget */
:root {
  --jdgm-primary-color: #FFB74A;
  --jdgm-secondary-color: rgba(255,183,74,0.1);
  --jdgm-star-color: #FFB74A;
  --jdgm-write-review-text-color: white;
  --jdgm-write-review-bg-color: #FFB74A;
  --jdgm-paginate-color: #FFB74A;
  --jdgm-border-radius: 0;
}

/* Cart app */
:root {
  --ufl-heading-family: var(--font-heading-family);
  --ufl-heading-weight: var(--font-heading-weight);
  --ufl-heading-text-transform: var(--font-heading-transform);
  --ufl-heading-scale-size: 1;
  --ufl-heading-scale-height: 1;
  --ufl-heading-scale-spacing: 1;
  --ufl-body-family: var(--font-body-family);
  --ufl-body-weight: var(--font-body-weight);
  --ufl-body-scale-size: .925;
  --ufl-body-scale-height: 1.5;
  --ufl-body-scale-spacing: 1;
  --ufl-btn-family: var(--font-button-family);
  --ufl-btn-weight: var(--font-button-weight);
  --ufl-btn-text-transform: var(--buttons-transform);
  --ufl-btn-scale-size: 1;
  --ufl-btn-scale-height: 1;
  --ufl-btn-scale-spacing: 1;
  --ufl-rad-btn: 50px;
  --ufl-pad-section-y: 30px;
  --ufl-pad-section-x: 20px;
  --ufl-max-w: 1400px;
  --ufl-element-my: 16px;
  --ufl-rad-sm: 8px;
  --ufl-rad-md: 16px;
  --ufl-rad-lg: 24px;
  --ufl-shadow-md: 0 4px 8px rgba(0, 0, 0, .1);
}

/* Remaining reference tokens */
:root {
  --heading-text-transform: uppercase;
  --stagger-products-reveal-opacity: 0;
}

/* --------------------------------------------------------------------------
   2. Bridge aliases -- --dqt-* -> brand tokens

   WordPress and WooCommerce markup has no counterpart in the original theme,
   so the bridge styles below build on these names instead of hard-coding
   colours.  Rebranding is a one-line change here, not a hunt through
   templates.
   -------------------------------------------------------------------------- */
:root {
  --dqt-ink: var(--text-primary);
  --dqt-ink-soft: var(--text-primary);
  --dqt-surface: var(--background-primary);
  --dqt-line: var(--border-color);
  --dqt-accent: var(--accent);
  --dqt-brand-yellow: 255 237 52;
  --dqt-header: var(--header-background);
  --dqt-footer: var(--footer-background);
  --dqt-on-sale: var(--on-sale-text);
  --dqt-radius: var(--rounded);
  --dqt-radius-lg: var(--rounded-lg);
  --dqt-radius-button: var(--rounded-button);
  --dqt-radius-input: var(--rounded-input);
  --dqt-shadow-sm: var(--shadow-sm);
  --dqt-shadow-md: var(--shadow-md);
  --dqt-font-heading: var(--heading-font-family);
  --dqt-font-body: var(--text-font-family);
  --dqt-max-width: var(--container-max-width);
  --dqt-narrow: var(--container-narrow-max-width);
  --dqt-gutter: var(--container-gutter);
  --dqt-tracking: var(--heading-letter-spacing);
  --dqt-section-gap: var(--section-outer-spacing-block);
  --dqt-header-height: 72px;
}

/* --------------------------------------------------------------------------
   3. Typographic normalisation

   The reference brand sets letter-spacing to 0 and relies on weight and case
   for hierarchy.  A handful of rules deep inside the shipped stylesheets
   hard-code positive tracking; normalise those while leaving var() references
   and intentional negative values alone.
   -------------------------------------------------------------------------- */
.woocommerce .price,
.woocommerce-Price-amount,
.woocommerce-result-count,
.woocommerce-breadcrumb,
.woocommerce-ordering select,
.woocommerce .star-rating,
.product_meta,
.shop_table {
  letter-spacing: 0;
}

/* Keep the WordPress admin bar from colliding with the sticky header. */
body.admin-bar .header-wrapper,
body.admin-bar .shopify-section--header {
  top: var(--wp-admin--admin-bar--height, 32px);
}