/* Shared design tokens for the public page and the trip editor.
   Contrast notes are against white unless stated. */
:root {
  /* Brand */
  --coral: #ff4742;            /* 3.4:1. Graphics, borders, focus, large type only */
  --coral-ink: #d42f2a;        /* 4.9:1. Small coral text and filled buttons with white text */
  --coral-ink-hover: #b8231e;
  --coral-wash: #fff1f0;
  --coral-glow: rgb(255 71 66 / 28%);

  /* Night (hero, admin bar) */
  --night: #0b0b10;
  --night-raised: #16161d;
  --night-line: rgb(255 255 255 / 14%);
  --on-night: #ffffff;
  --on-night-2: #a7a7b3;       /* 8.3:1 on night */

  /* Light surfaces */
  --surface: #ffffff;
  --canvas: #f6f6f4;
  --ink: #111114;
  --ink-2: #5c5c66;            /* 6.6:1 */
  --ink-3: #6b6b73;            /* 5.3:1 */
  --line: #ececef;
  --line-strong: #d9d9de;
  --field-border: #8a8a93;     /* 3.4:1, meets non-text contrast */
  --photo-fallback: #f0eeec;

  /* Status */
  --success: #13804b;          /* 5.0:1 */
  --success-dot: #25c76f;
  --danger: #c42620;           /* 5.8:1 */
  --danger-wash: #fff2f1;
  --danger-line: #f3b9b6;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.8125rem;        /* 13px */
  --text-sm: 0.875rem;         /* 14px */
  --text-md: 1rem;             /* 16px */
  --text-lg: 1.125rem;         /* 18px */
  --text-xl: 1.25rem;          /* 20px */
  --text-2xl: 1.5rem;          /* 24px */
  --text-3xl: 2rem;            /* 32px */
  --text-4xl: 2.5rem;          /* 40px */

  /* Space (4 and 8 pixel steps) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --shadow-soft: 0 1px 2px rgb(17 17 20 / 6%), 0 8px 24px rgb(17 17 20 / 6%);
  --shadow-float: 0 18px 48px rgb(11 11 16 / 22%);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 150ms;
  --duration: 200ms;

  /* Layout */
  --content-width: 1100px;
  --tap: 44px;
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--coral-ink);
}