/* ─── VELLON · Design tokens ──────────────────────────────────────────────
   Colors · Typography · Spacing/shape · Effects · Base. Values transcribed
   from the VELLON design system. The wordmark font (a geometric grotesque)
   was not provided as a binary; Jost stands in for it, and Cormorant Garamond
   is the accent serif — both via Google Fonts (CDN). Replace with the licensed
   brand fonts via @font-face when available. */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  /* Cream scale (brand #F1EFEA = cream-100) */
  --cream-000: #FBFAF7;
  --cream-050: #F7F5F0;
  --cream-100: #F1EFEA;
  --cream-200: #E7E3DA;
  --cream-300: #D8D2C4;
  --cream-400: #C4BCAA;

  /* Ink — warm espresso-black scale */
  --ink-900: #1B1712;
  --ink-800: #2A241C;
  --ink-700: #3D362B;
  --ink-500: #6B6355;
  --ink-400: #8A8172;
  --ink-300: #A79E8F;

  /* Métier accents */
  --espresso-700: #4A3728;
  --espresso-500: #6F543C;
  --caramel-500:  #A97E45;
  --caramel-300:  #CBA878;
  --terracotta-600: #93401F;
  --terracotta-500: #A64B26;
  --terracotta-100: #EBD9CE;
  --pistachio-600: #6A6E42;
  --pistachio-500: #7C8052;
  --pistachio-100: #E2E2CE;

  /* Semantic aliases */
  --surface-page: var(--cream-100);
  --surface-card: var(--cream-000);
  --surface-sunken: var(--cream-200);
  --surface-inverse: var(--ink-900);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-inverse: var(--cream-100);
  --text-accent: var(--terracotta-600);

  --accent: var(--terracotta-500);
  --accent-hover: var(--terracotta-600);
  --accent-soft: var(--terracotta-100);

  --border-subtle: rgba(27, 23, 18, 0.10);
  --border-strong: rgba(27, 23, 18, 0.22);
  --border-inverse: rgba(241, 239, 234, 0.22);

  --success: var(--pistachio-600);
  --success-soft: var(--pistachio-100);
  --warning: var(--caramel-500);
  --danger: var(--terracotta-600);
  --danger-soft: var(--terracotta-100);

  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--ink-700);

  /* Typography */
  --font-sans: "Jost", "Century Gothic", "Futura", sans-serif;
  --font-serif: "Cormorant Garamond", "Garamond", serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 64px;

  --font-display: 500 var(--text-3xl)/1.08 var(--font-sans);
  --font-heading: 500 var(--text-xl)/1.2 var(--font-sans);
  --font-body: 400 var(--text-base)/1.6 var(--font-sans);
  --font-caption: 400 var(--text-sm)/1.45 var(--font-sans);
  --font-label: 500 var(--text-xs)/1.2 var(--font-sans);
  --font-menu-item: 600 var(--text-lg)/1.3 var(--font-serif);
  --font-price: 400 var(--text-base)/1 var(--font-sans);

  --tracking-display: 0.16em;
  --tracking-label: 0.22em;
  --tracking-body: 0.01em;

  /* Spacing & shape */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --control-h-sm: 32px;
  --control-h-md: 42px;
  --control-h-lg: 52px;

  --container-max: 1120px;
  --gutter: var(--space-5);

  /* Effects */
  --shadow-card: none;
  --shadow-float: 0 8px 28px rgba(27, 23, 18, 0.14), 0 2px 8px rgba(27, 23, 18, 0.08);
  --shadow-tooltip: 0 4px 14px rgba(27, 23, 18, 0.18);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  --hover-darken: rgba(27, 23, 18, 0.05);
}

/* Base element styles */
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--font-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ink-900);
  color: var(--cream-100);
}