/* ============================================================
   HAUSKART — Webfonts
   Syne (display / wordmark) + Hanken Grotesk (text & UI).
   Loaded from Google Fonts; binaries are not stored locally —
   swap these imports for self-hosted @font-face when brand
   font files are supplied.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");


/* ============================================================
   HAUSKART — Color tokens
   Locked brand core: Charcoal #1F1F1F · Copper #C56A3D ·
   Beige #F5F2EE · Grey #8A8A8A
   Ramps are derived; the four cores are exact.
   ============================================================ */

:root {
  /* ---- Ink ramp (charcoal-anchored warm neutrals) ---- */
  --ink-950: #141413;
  --ink-900: #1F1F1F; /* BRAND CORE — Charcoal */
  --ink-800: #2E2D2B;
  --ink-700: #423F3C;
  --ink-600: #5C5955;
  --ink-500: #8A8A8A; /* BRAND CORE — Grey */
  --ink-400: #A8A5A0;
  --ink-300: #C6C2BB;
  --ink-200: #DDD9D2;
  --ink-100: #EAE7E1;

  /* ---- Beige ramp (surface family) ---- */
  --beige-50:  #FCFBF9;
  --beige-100: #F9F7F3;
  --beige-200: #F5F2EE; /* BRAND CORE — Beige */
  --beige-300: #ECE8E1;
  --beige-400: #E0DACF;

  /* ---- Copper ramp (accent family) ---- */
  --copper-50:  #FAF1EA;
  --copper-100: #F4E0D2;
  --copper-200: #E9C3AA;
  --copper-300: #DDA57F;
  --copper-400: #D1885E;
  --copper-500: #C56A3D; /* BRAND CORE — Copper */
  --copper-600: #A75831;
  --copper-700: #874627;
  --copper-800: #66351E;
  --copper-900: #472514;

  /* ---- Semantic hues (kept warm to sit with copper) ---- */
  --green-700: #2A5F3E;
  --green-600: #2F6B45;
  --green-100: #E2EDE4;
  --amber-700: #8F5A1B;
  --amber-600: #A66A21;
  --amber-100: #F6ECDA;
  --red-700:   #963028;
  --red-600:   #B23A2E;
  --red-100:   #F7E3DF;

  /* ---- Semantic aliases: text ---- */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-inverse:   var(--beige-50);
  --text-inverse-muted: rgba(252, 251, 249, 0.64);
  --text-accent:    var(--copper-600);
  --text-price:     var(--ink-900);
  --text-strike:    var(--ink-400);

  /* ---- Semantic aliases: surfaces ---- */
  --surface-page:    var(--beige-200);
  --surface-card:    #FFFFFF;
  --surface-sunken:  var(--beige-100);
  --surface-product: var(--beige-100); /* behind product photography */
  --surface-ink:     var(--ink-900);   /* dark panels, footer, signage */
  --surface-ink-raised: var(--ink-800);
  --surface-accent-soft: var(--copper-50);

  /* ---- Semantic aliases: accent / actions ---- */
  --accent:        var(--copper-500);
  --accent-hover:  var(--copper-600);
  --accent-press:  var(--copper-700);
  --accent-soft:   var(--copper-100);
  --accent-on:     #FFFFFF;

  /* ---- Borders & focus ---- */
  --border-subtle: rgba(31, 31, 31, 0.08);
  --border-medium: rgba(31, 31, 31, 0.14);
  --border-strong: rgba(31, 31, 31, 0.28);
  --border-inverse: rgba(252, 251, 249, 0.18);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--copper-500);

  /* ---- Status aliases ---- */
  --status-success:      var(--green-600);
  --status-success-soft: var(--green-100);
  --status-warning:      var(--amber-600);
  --status-warning-soft: var(--amber-100);
  --status-danger:       var(--red-600);
  --status-danger-soft:  var(--red-100);

  /* ---- Commerce ---- */
  --deal:        var(--copper-500);  /* offers & savings are copper, never red */
  --rating-star: var(--copper-500);  /* stars are copper, never yellow */
}


/* ============================================================
   HAUSKART — Typography tokens
   Display: Syne (geometric, matches the wordmark)
   Text/UI: Hanken Grotesk (warm grotesk, excellent numerals)
   ============================================================ */

:root {
  --font-display: "Syne", "Avenir Next", "Futura", sans-serif;
  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* system stack — no webfont on purpose */

  /* ---- Display (Syne) ---- */
  --type-display-xl: 800 64px/1.04 var(--font-display);
  --type-display-lg: 800 44px/1.08 var(--font-display);
  --type-display-md: 800 32px/1.12 var(--font-display);
  --type-display-sm: 700 24px/1.2 var(--font-display);
  --tracking-display: -0.01em;

  /* ---- Titles (Hanken Grotesk) ---- */
  --type-title-lg: 700 22px/1.25 var(--font-text);
  --type-title-md: 700 18px/1.3 var(--font-text);
  --type-title-sm: 600 16px/1.35 var(--font-text);

  /* ---- Body ---- */
  --type-body-lg: 400 17px/1.55 var(--font-text);
  --type-body-md: 400 15px/1.5 var(--font-text);
  --type-body-sm: 400 13px/1.45 var(--font-text);

  /* ---- UI ---- */
  --type-label-lg: 600 15px/1.2 var(--font-text);
  --type-label-md: 600 13.5px/1.2 var(--font-text);
  --type-label-sm: 600 12px/1.2 var(--font-text);
  --type-caption: 400 12px/1.4 var(--font-text);

  /* ---- Overline — the "KITCHEN. ELEVATED." voice ---- */
  --type-overline: 600 11.5px/1.2 var(--font-text);
  --tracking-overline: 0.18em; /* always uppercase */
  --type-overline-display: 700 12px/1.2 var(--font-display);

  /* ---- Price (Hanken Grotesk, tabular) ---- */
  --type-price-lg: 800 28px/1.1 var(--font-text);
  --type-price-md: 700 18px/1.1 var(--font-text);
  --type-price-sm: 700 15px/1.1 var(--font-text);
  --font-features-price: "tnum" 1, "lnum" 1;
}


/* ============================================================
   HAUSKART — Spacing & corner radii
   4px base. Radii are architectural: tight, never bubbly.
   ============================================================ */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Corner radii */
  --radius-xs: 2px;   /* badges, tags, price flags */
  --radius-sm: 4px;   /* buttons, inputs, chips */
  --radius-md: 8px;   /* cards, tiles, dropdowns */
  --radius-lg: 14px;  /* modals, sheets, hero media */
  --radius-pill: 999px; /* filter chips, quantity steppers (app) */

  /* Layout */
  --container-max: 1200px;
  --gutter-desktop: 32px;
  --gutter-mobile: 16px;
  --header-height: 64px;
}


/* ============================================================
   HAUSKART — Elevation
   Warm, charcoal-tinted shadows. Low and soft — premium goods
   sit on surfaces, they don't float. Cards prefer borders;
   shadows appear on lift (hover) and overlay layers.
   ============================================================ */

:root {
  --shadow-1: 0 1px 2px rgba(31, 31, 31, 0.05);
  --shadow-2: 0 2px 8px rgba(31, 31, 31, 0.07);
  --shadow-3: 0 8px 24px rgba(31, 31, 31, 0.10);
  --shadow-4: 0 24px 56px rgba(31, 31, 31, 0.18);
  --shadow-lift: 0 6px 16px rgba(31, 31, 31, 0.10), 0 1px 2px rgba(31, 31, 31, 0.06);

  /* Standard card recipe: border first, shadow second */
  --card-border: 1px solid var(--border-subtle);
}


/* ============================================================
   HAUSKART — Motion
   Confident and short. Ease-out for entrances, no bounce.
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 340ms; /* @kind other */

  --transition-hover: all var(--duration-fast) var(--ease-out);
  --transition-reveal: all var(--duration-base) var(--ease-out);
}


/* ============================================================
   HAUSKART — Base element styles
   Minimal resets + brand defaults for raw elements.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--type-body-md);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--copper-600); }

::selection { background: var(--copper-100); }

h1, h2, h3, h4, p { margin: 0; }