/* ================================================================
   Menuro Design System — Tokens
   Ink-navy + hospitality amber. Inter variable. 4px grid.
   ================================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
}

:root {
  /* Ink Navy */
  --ink-50:  #F3F5F9;
  --ink-100: #E4E8F0;
  --ink-200: #C6CEDC;
  --ink-300: #9AA6BC;
  --ink-400: #5F6E8A;
  --ink-500: #394A6B;
  --ink-600: #23324F;
  --ink-700: #17223A;
  --ink-800: #0F1829;
  --ink-900: #080D1A;

  /* Amber */
  --amber-50:  #FFF8EC;
  --amber-100: #FFEBC2;
  --amber-200: #FDD88A;
  --amber-300: #FABE4E;
  --amber-400: #F5A623;
  --amber-500: #D9881A;
  --amber-600: #AE6A14;
  --amber-700: #7D4B0E;

  /* Warm neutrals */
  --n-0:   #FFFFFF;
  --n-25:  #FAFAF9;
  --n-50:  #F5F5F4;
  --n-100: #EAEAE8;
  --n-200: #D7D7D4;
  --n-300: #B5B5B1;
  --n-400: #8B8B87;
  --n-500: #65655F;
  --n-600: #43433E;
  --n-700: #2A2A26;
  --n-900: #13130F;

  /* Semantic */
  --success-50:  #E9F6EE;
  --success-400: #3BA66C;
  --success-600: #1F7A48;
  --danger-400: #D64A2B;

  /* Roles */
  --bg:            var(--n-0);
  --bg-muted:      var(--n-25);
  --bg-subtle:     var(--n-50);
  --bg-inverse:    var(--ink-800);

  --fg-1:          var(--ink-800);
  --fg-2:          var(--ink-500);
  --fg-3:          var(--n-400);
  --fg-on-dark:    var(--n-0);
  --fg-on-accent:  var(--ink-800);

  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-subtle: var(--n-100);
  --border-dark:   rgba(255,255,255,0.08);

  --primary:       var(--ink-700);
  --primary-hover: var(--ink-600);
  --primary-press: var(--ink-800);
  --accent:        var(--amber-400);
  --accent-hover:  var(--amber-300);
  --accent-press:  var(--amber-500);

  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--amber-400) 45%, transparent);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15,24,41,0.05);
  --shadow-sm: 0 1px 2px rgba(15,24,41,0.06), 0 1px 3px rgba(15,24,41,0.08);
  --shadow-md: 0 4px 8px -2px rgba(15,24,41,0.08), 0 2px 4px -2px rgba(15,24,41,0.06);
  --shadow-lg: 0 12px 24px -6px rgba(15,24,41,0.12), 0 4px 8px -2px rgba(15,24,41,0.06);
  --shadow-xl: 0 24px 48px -12px rgba(15,24,41,0.18);
  --shadow-2xl: 0 40px 80px -20px rgba(15,24,41,0.26);
  --shadow-glow-amber: 0 0 0 1px rgba(245,166,35,0.3), 0 20px 60px -12px rgba(245,166,35,0.35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(15,24,41,0.04);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --pad-x: clamp(24px, 4vw, 40px);
  --nav-h: 64px;
}