/* CheckInSIM — design tokens
 * Single source of truth for color, type, space, motion, radii, shadows.
 * Locked 2026-04-30. Direction 02 · The Conversation. */

:root {
  /* Brand neutrals */
  --navy:     #071B33;
  --navy-2:   #0E2742;
  --navy-3:   #14365A;
  --canvas:   #F7F3EA;
  --paper:    #FBF8F1;
  --hairline: oklch(80% 0.01 60);

  /* Brand accent — arrival green */
  --green:        #16C784;
  --green-dark:   #0E9D63;
  --green-darker: #0A7C4D;
  --mint:         #E9FFF6;

  /* Functional UI tokens (never used as brand color) */
  --sky:    #36A3FF;
  --amber:  #FFB84D;
  --coral:  #FF5C5C;
  --warn-bg:  #FFF6E5;
  --error-bg: #FFE9E9;

  /* Text */
  --ink:        #1C2430;
  --ink-2:      #2B3548;
  --muted:      #475569;
  --muted-2:    #64748B;
  --whisper:    #94A3B8;

  /* WhatsApp surface (for chat-mockup components) */
  --whatsapp-bg:         #ECE5DC;
  --whatsapp-bubble-in:  #FFFFFF;
  --whatsapp-bubble-out: #DCF8C6;
  --whatsapp-meta:       #667781;

  /* Spacing — 4pt scale */
  --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;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(7, 27, 51, 0.06);
  --shadow-md: 0 8px 22px -10px rgba(7, 27, 51, 0.18);
  --shadow-lg: 0 18px 40px -22px rgba(7, 27, 51, 0.22);
  --shadow-xl: 0 32px 70px -36px rgba(7, 27, 51, 0.32);
  --shadow-green: 0 10px 24px -10px rgba(22, 199, 132, 0.55);

  /* Type scale */
  --font-display: 'Cabinet Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', 'Cascadia Code', monospace;

  --text-xs:   12px;
  --text-sm:   13.5px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   19px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  80px;
  --text-6xl:  clamp(46px, 5.4vw, 80px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 380ms;

  /* Layout */
  --max-content: 1320px;
  --nav-h: 76px;
}

/* Base reset + body */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-size: var(--text-base);
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }

/* Display headings default */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0;
}