/**
 * GETU Shopping — design tokens + base type.
 *
 * On the BR site these come from the Bricks global settings; getushopping.de has
 * no such config yet, so this file ships the same custom properties + the two
 * brand fonts and the base element styling every other getu-*.css relies on.
 * Enqueue this FIRST (before getu-tailwind.css / getu-chrome.css).
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Hanken+Grotesk:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --getu-color-wine-950: #1E0A0F;
  --getu-color-wine-900: #2A0E14;
  --getu-color-wine-800: #3A0F18;
  --getu-color-wine-700: #5A1320;
  --getu-color-wine-600: #6E1A2A;
  --getu-color-wine-500: #8B2436;
  --getu-color-wine-400: #A8394B;
  --getu-color-gold: #C8A45D;
  --getu-color-gold-soft: #DCC18A;
  --getu-color-gold-hover: #D8B873;
  --getu-color-cream: #F6F1EA;
  --getu-color-sand: #EFE7DB;
  --getu-color-ink: #241015;
  --getu-color-border: rgba(42,14,20,.10);

  --getu-font-display: "Cormorant Garamond", Georgia, serif;
  --getu-font-sans: "Hanken Grotesk", system-ui, sans-serif;

  --getu-ink-on-light: var(--getu-color-ink);
  --getu-heading-on-light: var(--getu-color-wine-900);
  --getu-accent-on-light: var(--getu-color-wine-500);
  --getu-link-on-light: var(--getu-color-wine-700);
  --getu-ink-on-dark: var(--getu-color-cream);
  --getu-accent-on-dark: var(--getu-color-gold);
  --getu-surface-base: var(--getu-color-cream);
  --getu-surface-raised: var(--getu-color-sand);
  --getu-surface-dark: var(--getu-color-wine-900);

  --getu-tracking-display: -0.02em;
  --getu-tracking-tightest: -0.03em;
  --getu-tracking-kicker: 0.3em;
  --getu-leading-body: 1.7;
  --getu-leading-h1: 0.95;
  --getu-leading-h2: 1.06;

  --getu-text-h1: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);
  --getu-text-h2: clamp(1.75rem, 1rem + 3.1vw, 3.25rem);
  --getu-text-h2-cta: clamp(1.6rem, 1rem + 2.6vw, 2.875rem);
  --getu-text-lead: clamp(1rem, .95rem + .28vw, 1.125rem);
  --getu-text-kicker: 0.7rem;

  --getu-space-section: clamp(3.25rem, 1.5rem + 5.4vw, 6rem);
  --getu-space-section-head: clamp(2.5rem, 1rem + 4.6vw, 3.5rem);
  --getu-space-hero: clamp(2.25rem, .5rem + 5.4vw, 6rem);
  --getu-gutter: 1.25rem;

  --getu-container-main: 80rem;
  --getu-container-text: 42rem;
  --getu-container-prose: 48rem;

  --getu-radius-card: 1rem;
  --getu-radius-md: 0.75rem;
  --getu-radius-sm: 0.5rem;
  --getu-radius-pill: 9999px;

  --getu-shadow-raised: 0 1px 2px rgba(42,14,20,.05), 0 4px 12px rgba(42,14,20,.06);
  --getu-shadow-float: 0 6px 16px rgba(42,14,20,.08), 0 18px 40px rgba(42,14,20,.12);
  --getu-shadow-deep: 0 10px 30px rgba(20,6,10,.35), 0 30px 60px rgba(20,6,10,.45);

  --getu-ease-out: cubic-bezier(.16, 1, .3, 1);
  --getu-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --getu-measure: 58ch;
  --getu-announce-h: 2.425rem;
}

html { background-color: var(--getu-surface-base); font-size: 100%; }
body {
  font-family: var(--getu-font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--getu-ink-on-light);
  background: var(--getu-surface-base);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--getu-font-display);
  font-weight: 600;
  letter-spacing: var(--getu-tracking-display);
  color: var(--getu-heading-on-light);
}
h1 { font-size: var(--getu-text-h1); line-height: var(--getu-leading-h1); }
h2 { font-size: var(--getu-text-h2); line-height: var(--getu-leading-h2); }
:where(.brxe-text) a, :where(.brxe-text-basic) a, :where(a.brxe-text), :where(a.brxe-text-basic) {
  color: var(--getu-link-on-light);
  transition: color .25s var(--getu-ease-out);
}