/* BE-CLONE — Design Tokens
   Source: surfprescriptions.com (Shopify)
   Extracted: 2026-02-19 via DevTools
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ── Typography (exact Shopify) ── */
  --font-heading: "Oswald", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --font-nav: "Open Sans", sans-serif;
  --font-button: "Open Sans", sans-serif;
  --font-label: "Open Sans", sans-serif;

  --font-adjust-heading: 0.75;
  --font-adjust-body: 1.05;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── Colors (exact Shopify :root) ── */
  --color-bg: #ffffff;
  --color-bg-darken: #e6e6e6;
  --color-heading: #0b0b0b;
  --color-text: #0b0b0b;
  --color-text-light: #3e3e3e;
  --color-accent: #000000;
  --color-border: #d3d3d3;
  --color-sale: #d02e2e;
  --color-success: #16a34a;

  --color-btn-bg: #000000;
  --color-btn-text: #ffffff;

  --color-footer-bg: #000000;
  --color-footer-text: #ffffff;
  --color-footer-border: #ffffff;

  /* ── Layout (exact Shopify) ── */
  --site-width: 1440px;
  --site-width-narrow: 840px;
  --gutter: 60px;
  --gutter-mobile: 20px;
  --grid-gutter: 20px;

  /* ── Header (exact Shopify) ── */
  --header-height: 74px;
  --header-sticky-height: 60px;
  --header-bg-height: 74px;
  --logo-width: 200px;
  --logo-height: 44px;
  --logo-scroll-width: 180px;
  --logo-scroll-height: 40px;

  /* ── Radius (exact Shopify — 10px for buttons) ── */
  --radius: 8px;
  --radius-btn: 10px;
  --radius-small: 8px;
  --radius-tiny: 8px;
  --radius-badge: 3px;

  /* ── Borders ── */
  --border-width: 1px;
  --border-color: #e8e8e8;

  /* ── Spacing (section padding) ── */
  --section-pt: 60px;
  --section-pb: 60px;

  /* ── Grid (exact Shopify breakpoints) ── */
  --grid-desktop: repeat(4, minmax(0, 1fr));
  --grid-tablet: repeat(3, minmax(0, 1fr));
  --grid-mobile: repeat(2, minmax(0, 1fr));

  /* ── Product Media ── */
  --product-media-ratio: 150%;

  /* ── Letter Spacing (exact Shopify) ── */
  --ls-nav: 0.05em;
  --ls-button: 0.074em;
  --ls-heading: 0.02em;

  /* ── Text Transform ── */
  --caps-button: uppercase;
  --caps-heading: none;
  --caps-nav: uppercase;
  --caps-label: uppercase;

  /* ── Drawer ── */
  --drawer-width: 400px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 400ms;

  /* ── Announcement Bar ── */
  --announcement-bg: #ffffff;
  --announcement-text: #0b0b0b;
  --announcement-font-size: 12px;
  --announcement-ls: 0.08em;
  --announcement-speed: 30s;
}