/* ==========================================================================
   THE BODY SHOP GIFTING - DESIGN TOKENS
   The single source of truth for colour, type, space, radius, shadow and motion.
   Every other stylesheet consumes these variables and defines no raw values.

   Colour values are production-ready recommendations derived from thebodyshop.in.
   Confirm against the official QRPL brand guideline pack before launch.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --tbs-green:        #004B34;   /* primary: header, footer, primary buttons, headings */
  --tbs-green-deep:   #00301F;   /* hover states, dark overlays, hero scrims */
  --tbs-green-soft:   #E7EFEA;   /* section tints, selected chips, badges */
  --cream:            #F7F4EE;   /* page canvas - never pure white */
  --cream-deep:       #EFEAE0;
  --white:            #FFFFFF;
  --gold:             #C8A96A;   /* reserved accent: CUSTOMIZABLE badge, gift rules */
  --gold-soft:        #F1E6CF;
  --rose:             #D96E8A;   /* range-led theming (British Rose) */
  --ink:              #1A1A1A;   /* body copy */
  --ink-mute:         #6B6459;   /* secondary copy, captions, struck-through MRP */
  --line:            #D6D1C7;    /* hairlines - 1px, never heavier */
  --danger:          #B0413E;
  --success:         #2F7A4F;
  --warning:         #B8791F;
  --info:            #2A6F97;

  /* Range accents - overridden per range page from G_Range.AccentHex */
  --accent:           var(--tbs-green);

  /* ---- Typography ------------------------------------------------------- */
  /* Self-hosted in wwwroot/fonts. Replace with the official brand face when
     marketing confirms the web licence. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-display:   clamp(2.6rem, 6vw, 5rem);
  --fs-h1:        clamp(2rem, 4vw, 3rem);
  --fs-h2:        clamp(1.5rem, 2.6vw, 2.125rem);
  --fs-h3:        1.25rem;
  --fs-body:      1rem;      /* 16px mobile - never smaller on inputs, iOS zooms */
  --fs-body-lg:   1.0625rem; /* 17px desktop */
  --fs-small:     0.875rem;
  --fs-eyebrow:   0.78rem;

  --lh-tight:     1.02;
  --lh-heading:   1.15;
  --lh-body:      1.6;

  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.02em;

  /* ---- Spacing: 8pt grid ----------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --container:      1280px;
  --container-text: 68ch;

  /* ---- Radius and elevation ------------------------------------------- */
  --radius-card:  2px;
  --radius-pill:  999px;
  --radius-input: 2px;

  --shadow-card:  0 1px 2px rgba(0, 48, 31, .04), 0 8px 24px rgba(0, 48, 31, .06);
  --shadow-lift:  0 2px 4px rgba(0, 48, 31, .06), 0 16px 40px rgba(0, 48, 31, .10);
  --shadow-sticky: 0 -2px 16px rgba(0, 48, 31, .08);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-brand: cubic-bezier(.22, 1, .36, 1);   /* the single house easing */
  --dur-micro:     180ms;
  --dur-component: 320ms;
  --dur-section:   620ms;
  --dur-flip:      520ms;

  /* ---- Layers ---------------------------------------------------------- */
  --z-header:   100;
  --z-drawer:   200;
  --z-sticky:   150;
  --z-overlay:  300;
  --z-toast:    400;
}

/* Accessibility: honour the OS setting. Not optional.
   The MotionIntensity site setting layers on top of this by gating GSAP
   loading entirely - see motion.js. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-component: 1ms;
    --dur-section: 1ms;
    --dur-flip: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BASE RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
  body { font-size: var(--fs-body-lg); }
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-heading);
  color: var(--tbs-green);
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--tbs-green);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover { color: var(--tbs-green-deep); }

/* Keyboard focus must always be visible. Never `outline: none`. */
:focus-visible {
  outline: 2px solid var(--tbs-green);
  outline-offset: 2px;
}

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

/* Prices align in columns */
.num { font-variant-numeric: tabular-nums; }

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Eyebrow label used above section headings */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-2);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--sp-5); }
}