/* ==========================================================================
   Hogo Delivery — Design System (consolidated)
   Tokens (colors, typography, spacing, base) bundled into one file for deploy.
   Source: Hogo Delivery Design System handoff (claude.ai/design).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Averia+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

:root {
  /* ---- Brand core ---- */
  --hogo-red:  #A94848;
  --hogo-navy: #232935;

  /* ---- Red family ---- */
  --red-900: #5E2727;
  --red-800: #7A3434;
  --red-700: #8E3838;
  --red-600: #A94848;
  --red-500: #BB5953;
  --red-400: #CB746E;
  --red-300: #DD9C97;
  --red-200: #EDC8C4;
  --red-100: #F4DDDA;
  --red-50:  #FAEEEC;

  /* ---- Ink / navy-graphite family ---- */
  --ink-900: #14181F;
  --ink-800: #1A1F29;
  --ink-700: #232935;
  --ink-600: #333B4A;
  --ink-500: #4A5365;
  --ink-400: #6B7384;
  --ink-300: #99A0AD;
  --ink-200: #C4C9D1;
  --ink-100: #E2E5EA;

  /* ---- Deep navy-blue accent ---- */
  --navy-deep: #16203A;
  --navy-mid:  #243355;

  /* ---- Warm neutral base ---- */
  --paper:      #F4ECE0;
  --paper-2:    #EDE3D4;
  --sand:       #E5D8C4;
  --off-white:  #FBF6EE;
  --warm-white: #FFFDF9;
  --white:      #FFFFFF;

  /* ---- Semantic status ---- */
  --success: #4E7A5B;  --success-bg: #E4EDE5;
  --warning: #C5872F;  --warning-bg: #F6E9CF;
  --danger:  #A94848;  --danger-bg:  #F4DDDA;
  --info:    #243355;  --info-bg:    #DEE3EE;

  /* ---- Semantic aliases ---- */
  --bg-page:        var(--paper);
  --bg-page-warm:   var(--off-white);
  --surface-card:   var(--warm-white);
  --surface-sunken: var(--paper-2);
  --surface-inverse:var(--ink-700);
  --surface-accent: var(--hogo-red);

  --text-strong:  var(--ink-800);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-400);
  --text-faint:   var(--ink-300);
  --text-on-dark: var(--off-white);
  --text-on-red:  var(--warm-white);
  --text-accent:  var(--hogo-red);

  --border-soft:   rgba(35, 41, 53, 0.10);
  --border-mid:    rgba(35, 41, 53, 0.18);
  --border-strong: var(--ink-700);
  --border-accent: var(--hogo-red);
  --divider:       rgba(35, 41, 53, 0.08);

  --accent:       var(--hogo-red);
  --accent-hover: var(--red-700);
  --accent-press: var(--red-800);
  --accent-soft:  var(--red-100);
  --focus-ring:   rgba(169, 72, 72, 0.40);

  /* ---- Type families ---- */
  --font-display: 'Averia Libre', 'Shippori Mincho', cursive;
  --font-serif:   'Shippori Mincho', 'Times New Roman', serif;
  --font-sans:    'Zen Kaku Gothic New', system-ui, -apple-system, sans-serif;

  /* ---- Type scale ---- */
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px;
  --text-md: 18px;  --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px;
  --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 62px; --text-6xl: 80px;
  --text-7xl: 104px;

  /* ---- Weights ---- */
  --weight-light: 300;   --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;   --weight-black: 900;

  /* ---- Line heights ---- */
  --leading-tight: 1.05; --leading-snug: 1.22;
  --leading-normal: 1.5; --leading-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;  --tracking-brand: 0.06em;

  /* ---- Spacing scale (4px base) ---- */
  --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;

  /* ---- Radius ---- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 22px; --radius-2xl: 28px; --radius-pill: 999px; --radius-circle: 50%;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(35,41,53,0.06);
  --shadow-sm: 0 2px 6px rgba(35,41,53,0.07);
  --shadow-md: 0 6px 18px rgba(35,41,53,0.09);
  --shadow-lg: 0 14px 38px rgba(35,41,53,0.12);
  --shadow-xl: 0 28px 64px rgba(35,41,53,0.16);
  --shadow-red: 0 10px 26px rgba(169,72,72,0.28);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms;
}

/* ---- Base reset & element defaults ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-strong);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; }