/* ============================================================
   DreamLoop Artisan — Design System Tokens & Global Resets
   ============================================================
   Source: dreamloop_crafts_ecommerce_redesign/DESIGN.md
   Fonts: Outfit (display/headings/prices) + Inter (body/utility)
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700&display=swap');

/* ── Material Symbols (Outlined) - display=block prevents FOUT raw text flash ── */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

/* ── CSS Custom Properties ───────────────────────────────── */
:root {
  /* ─ Color Tokens (Material-style surfaces) ─ */
  --dl-surface:                 #fff8f4;
  --dl-surface-dim:             #e0d9d4;
  --dl-surface-bright:          #fff8f4;
  --dl-surface-container-lowest:#ffffff;
  --dl-surface-container-low:   #faf2ed;
  --dl-surface-container:       #f4ece7;
  --dl-surface-container-high:  #eee7e2;
  --dl-surface-container-highest:#e8e1dc;
  --dl-on-surface:              #1e1b18;
  --dl-on-surface-variant:      #3d4947;
  --dl-inverse-surface:         #33302d;
  --dl-inverse-on-surface:      #f7efea;
  --dl-outline:                 #6d7a77;
  --dl-outline-variant:         #bcc9c6;
  --dl-surface-tint:            #006a61;
  --dl-surface-variant:         #e8e1dc;

  /* ─ Primary (Teal) ─ */
  --dl-primary:                 #00685f;
  --dl-on-primary:              #ffffff;
  --dl-primary-container:       #008378;
  --dl-on-primary-container:    #f4fffc;
  --dl-inverse-primary:         #6bd8cb;
  --dl-primary-fixed:           #89f5e7;
  --dl-primary-fixed-dim:       #6bd8cb;
  --dl-on-primary-fixed:        #00201d;
  --dl-on-primary-fixed-variant:#005049;

  /* ─ Secondary (Honey Golden) ─ */
  --dl-secondary:               #855300;
  --dl-on-secondary:            #ffffff;
  --dl-secondary-container:     #fea619;
  --dl-on-secondary-container:  #684000;
  --dl-secondary-fixed:         #ffddb8;
  --dl-secondary-fixed-dim:     #ffb95f;
  --dl-on-secondary-fixed:      #2a1700;
  --dl-on-secondary-fixed-variant:#653e00;

  /* ─ Tertiary (Coral Red) ─ */
  --dl-tertiary:                #b61722;
  --dl-on-tertiary:             #ffffff;
  --dl-tertiary-container:      #da3437;
  --dl-on-tertiary-container:   #fffbff;
  --dl-tertiary-fixed:          #ffdad7;
  --dl-tertiary-fixed-dim:      #ffb3ad;
  --dl-on-tertiary-fixed:       #410004;
  --dl-on-tertiary-fixed-variant:#930013;

  /* ─ Error ─ */
  --dl-error:                   #ba1a1a;
  --dl-on-error:                #ffffff;
  --dl-error-container:         #ffdad6;
  --dl-on-error-container:      #93000a;

  /* ─ Semantic Accents ─ */
  --dl-canvas-cream:            #FFFDF9;
  --dl-surface-warm:            #F8F5F0;
  --dl-surface-card:            #FFFFFF;
  --dl-olive-sage:              #65A30D;
  --dl-accent-teal-subtle:      #E6FFFA;
  --dl-accent-coral-subtle:     #FEF2F2;
  --dl-accent-honey-subtle:     #FFFBEB;
  --dl-craft-stitch:            #E2D9CC;
  --dl-background:              #fff8f4;
  --dl-on-background:           #1e1b18;

  /* ─ Functional Action Colors ─ */
  --dl-teal:                    #0D9488;
  --dl-honey:                   #F59E0B;
  --dl-coral:                   #EF4444;

  /* ─ Typography ─ */
  --font-display:               'Outfit', sans-serif;
  --font-body:                  'Inter', sans-serif;

  /* Display Hero */
  --fs-display-hero:            56px;
  --lh-display-hero:            64px;
  --fw-display-hero:            700;
  --ls-display-hero:            -0.02em;

  /* Display Hero Mobile */
  --fs-display-hero-mobile:     36px;
  --lh-display-hero-mobile:     44px;
  --fw-display-hero-mobile:     700;
  --ls-display-hero-mobile:     -0.01em;

  /* Headline Large */
  --fs-headline-lg:             32px;
  --lh-headline-lg:             40px;
  --fw-headline-lg:             700;
  --ls-headline-lg:             -0.015em;

  /* Headline Large Mobile */
  --fs-headline-lg-mobile:      26px;
  --lh-headline-lg-mobile:      34px;

  /* Headline Medium */
  --fs-headline-md:             24px;
  --lh-headline-md:             32px;
  --fw-headline-md:             600;
  --ls-headline-md:             -0.01em;

  /* Headline Small */
  --fs-headline-sm:             18px;
  --lh-headline-sm:             26px;
  --fw-headline-sm:             600;

  /* Title Product */
  --fs-title-product:           16px;
  --lh-title-product:           22px;
  --fw-title-product:           600;

  /* Body Large */
  --fs-body-lg:                 18px;
  --lh-body-lg:                 28px;

  /* Body Medium */
  --fs-body-md:                 15px;
  --lh-body-md:                 24px;

  /* Body Small */
  --fs-body-sm:                 13px;
  --lh-body-sm:                 20px;

  /* Price Hero */
  --fs-price-hero:              28px;
  --lh-price-hero:              32px;

  /* Price Card */
  --fs-price-card:              18px;
  --lh-price-card:              22px;

  /* Label Pill */
  --fs-label-pill:              12px;
  --lh-label-pill:              16px;
  --ls-label-pill:              0.03em;

  /* Label Micro */
  --fs-label-micro:             11px;
  --lh-label-micro:             14px;

  /* ─ Spacing ─ */
  --space-xs:                   0.25rem;  /* 4px */
  --space-sm:                   0.5rem;   /* 8px */
  --space-md:                   1rem;     /* 16px */
  --space-lg:                   1.5rem;   /* 24px */
  --space-xl:                   2.5rem;   /* 40px */
  --gutter:                     1.25rem;  /* 20px */
  --gutter-mobile:              0.75rem;  /* 12px */
  --margin:                     2rem;     /* 32px */
  --margin-mobile:              1rem;     /* 16px */

  /* ─ Border Radius ─ */
  --radius-sm:                  0.5rem;
  --radius-default:             1rem;
  --radius-md:                  1.5rem;
  --radius-lg:                  2rem;
  --radius-xl:                  3rem;
  --radius-full:                9999px;

  /* ─ Elevation (warm ambient shadows) ─ */
  --shadow-card:                0 4px 20px -2px rgba(43,40,37,0.04),
                                0 2px 6px -1px rgba(43,40,37,0.02);
  --shadow-card-hover:          0 12px 28px -4px rgba(13,148,136,0.12),
                                0 4px 10px -2px rgba(43,40,37,0.04);
  --shadow-glass:               0 1px 8px rgba(43,40,37,0.05);
  --shadow-overlay:             0 16px 48px -8px rgba(43,40,37,0.18);

  /* ─ Glass / Blur ─ */
  --glass-bg:                   rgba(255,253,249,0.85);
  --glass-border:               1px solid rgba(226,217,204,0.6);
  --glass-blur:                 blur(12px);
  --overlay-bg:                 rgba(43,40,37,0.45);
  --overlay-blur:               blur(4px);

  /* ─ Transitions ─ */
  --transition-fast:            150ms ease;
  --transition-default:         250ms ease;
  --transition-slow:            400ms ease;
  --transition-spring:          350ms cubic-bezier(0.34,1.56,0.64,1);

  /* ─ Container ─ */
  --container-max:              1280px;
}

/* ── Global Resets ────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--dl-on-surface);
  background-color: var(--dl-canvas-cream) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

/* Override old yellow gradient */
body[style*="background"] {
  background: var(--dl-canvas-cream) !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--dl-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--dl-primary-container);
}

/* ── Typography Utility Classes ──────────────────────────── */
.dl-display-hero {
  font-family: var(--font-display);
  font-size: var(--fs-display-hero);
  line-height: var(--lh-display-hero);
  font-weight: var(--fw-display-hero);
  letter-spacing: var(--ls-display-hero);
}

.dl-headline-lg {
  font-family: var(--font-display);
  font-size: var(--fs-headline-lg);
  line-height: var(--lh-headline-lg);
  font-weight: var(--fw-headline-lg);
  letter-spacing: var(--ls-headline-lg);
}

.dl-headline-md {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  line-height: var(--lh-headline-md);
  font-weight: var(--fw-headline-md);
  letter-spacing: var(--ls-headline-md);
}

.dl-headline-sm {
  font-family: var(--font-display);
  font-size: var(--fs-headline-sm);
  line-height: var(--lh-headline-sm);
  font-weight: var(--fw-headline-sm);
}

.dl-title-product {
  font-family: var(--font-display);
  font-size: var(--fs-title-product);
  line-height: var(--lh-title-product);
  font-weight: var(--fw-title-product);
}

.dl-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.dl-body-md {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}

.dl-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.dl-price-hero {
  font-family: var(--font-display);
  font-size: var(--fs-price-hero);
  line-height: var(--lh-price-hero);
  font-weight: 700;
}

.dl-price-card {
  font-family: var(--font-display);
  font-size: var(--fs-price-card);
  line-height: var(--lh-price-card);
  font-weight: 700;
}

.dl-label-pill {
  font-family: var(--font-display);
  font-size: var(--fs-label-pill);
  line-height: var(--lh-label-pill);
  font-weight: 600;
  letter-spacing: var(--ls-label-pill);
  text-transform: uppercase;
}

.dl-label-micro {
  font-family: var(--font-body);
  font-size: var(--fs-label-micro);
  line-height: var(--lh-label-micro);
  font-weight: 500;
}

/* ── Color Utility Classes ───────────────────────────────── */
.text-primary    { color: var(--dl-primary) !important; }
.text-secondary  { color: var(--dl-secondary) !important; }
.text-tertiary   { color: var(--dl-tertiary) !important; }
.text-olive      { color: var(--dl-olive-sage) !important; }
.text-on-surface { color: var(--dl-on-surface) !important; }
.text-on-surface-variant { color: var(--dl-on-surface-variant) !important; }
.text-outline    { color: var(--dl-outline) !important; }
.text-teal       { color: var(--dl-teal) !important; }
.text-honey      { color: var(--dl-honey) !important; }
.text-coral      { color: var(--dl-coral) !important; }

.bg-primary           { background-color: var(--dl-primary) !important; }
.bg-primary-container { background-color: var(--dl-primary-container) !important; }
.bg-canvas-cream      { background-color: var(--dl-canvas-cream) !important; }
.bg-surface-warm      { background-color: var(--dl-surface-warm) !important; }
.bg-surface-card      { background-color: var(--dl-surface-card) !important; }
.bg-accent-teal       { background-color: var(--dl-accent-teal-subtle) !important; }
.bg-accent-coral      { background-color: var(--dl-accent-coral-subtle) !important; }
.bg-accent-honey      { background-color: var(--dl-accent-honey-subtle) !important; }

/* ── Container ───────────────────────────────────────────── */
.dl-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ── Elevation Utilities ─────────────────────────────────── */
.dl-shadow-card       { box-shadow: var(--shadow-card); }
.dl-shadow-card-hover { box-shadow: var(--shadow-card-hover); }
.dl-shadow-glass      { box-shadow: var(--shadow-glass); }

/* ── Shape Utilities ─────────────────────────────────────── */
.dl-rounded-sm   { border-radius: var(--radius-sm); }
.dl-rounded      { border-radius: var(--radius-default); }
.dl-rounded-md   { border-radius: var(--radius-md); }
.dl-rounded-lg   { border-radius: var(--radius-lg); }
.dl-rounded-xl   { border-radius: var(--radius-xl); }
.dl-rounded-full { border-radius: var(--radius-full); }

/* ── Craft Stitched Border ───────────────────────────────── */
.dl-stitch-border {
  border: 1.5px dashed var(--dl-craft-stitch);
  padding: 4px;
}
.dl-stitch-border-focus:focus-within {
  border-color: var(--dl-teal);
}

/* ── Gradient Text ───────────────────────────────────────── */
.dl-gradient-text {
  background: linear-gradient(135deg, var(--dl-primary), var(--dl-secondary), var(--dl-tertiary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Material Symbols Base (Strictly Enforced Font-Family & Ligatures) ── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ── Responsive Typography ───────────────────────────────── */
@media (max-width: 767px) {
  .dl-display-hero {
    font-size: var(--fs-display-hero-mobile);
    line-height: var(--lh-display-hero-mobile);
    letter-spacing: var(--ls-display-hero-mobile);
  }
  .dl-headline-lg {
    font-size: var(--fs-headline-lg-mobile);
    line-height: var(--lh-headline-lg-mobile);
  }
  .dl-container {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
}

/* ── Scrollbar Hide Utility ──────────────────────────────── */
.dl-no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.dl-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ── Preloader Override (Match New Theme) ────────────────── */
.preloader-wrapper {
  background: var(--dl-canvas-cream);
}
.preloader {
  border-top-color: var(--dl-primary) !important;
}

/* ── Animation Keyframes ─────────────────────────────────── */
@keyframes dl-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dl-slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dl-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes dl-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes dl-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.dl-animate-fadeIn   { animation: dl-fadeIn 0.5s ease-out both; }
.dl-animate-slideUp  { animation: dl-slideUp 0.6s ease-out both; }
.dl-animate-pulse    { animation: dl-pulse 2s infinite; }
.dl-animate-bounce   { animation: dl-bounce 1s infinite; }
.dl-animate-ping     { animation: dl-ping 1s cubic-bezier(0,0,0.2,1) infinite; }