/* ═══════════════════════════════════════════════════════════
   M&S Kitchen — Premium Design System
   Apple HCI principles · M&S brand language · 8pt grid
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts loaded in index.html ──────────────────── */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Colour */
  --green-900: #004f32;   /* M&S bottle green — primary actions, headers */
  --green-700: #1f6b4d;   /* mid green — secondary actions */
  --green-100: #f0f5f1;   /* surface tint */
  --gold:      #C9A84C;   /* M&S gold — accents, pinned, active */
  --gold-soft: #fdf8ee;   /* gold surface */
  --cream:     #F7F5F0;   /* warm page background */
  --surface:   #FFFFFF;   /* card surface */
  --text-900:  #1A1A1A;   /* primary text */
  --text-500:  #6B6B6B;   /* muted / secondary */
  --text-300:  #ADADAD;   /* placeholder / disabled */
  --border:    #E8E4DC;   /* warm border */
  --red:       #C0392B;   /* destructive — muted terracotta */
  --red-soft:  #fdf2f2;
  --yellow:      #FFE000; /* M&S yellow sticker */
  --yellow-dark: #1a1600;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;

  /* Spacing (8pt grid) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* Radii */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;

  /* Shadows */
  --shadow-card:    0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-raised:  0 4px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-dock:    0 -4px 24px rgba(0,0,0,0.10), 0 -1px 4px rgba(0,0,0,0.05);

  /* Transitions */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease:   cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Base ───────────────────────────────────────────────── */
html {
  height: 100%;
}

body {
  font-family: var(--font-ui);
  background-color: var(--cream);
  color: var(--text-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  overflow: hidden;
}

.app-container {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--s4);
  height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ── Shared empty-state text (#loading id is Kitchen's own, .no-items is
   used by both Kitchen and Finance — Finance fully overrides it with a
   more specific selector, so this is just the shared default) ──────── */
#loading, .no-items {
  text-align: center;
  padding: 48px var(--s5);
  color: var(--text-500);
  font-size: 15px;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
}