/* ─── Design Tokens — Day Sheets ─────────────────────────────────────────────
   Single source of truth for all design tokens, reset, and global rules.
   Every page links this file. Changes here propagate everywhere.
   Aligns with DESIGN.md (Signal direction, v0.1).
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Tokens — Light mode ────────────────────────────────────────────────── */
:root {
  /* Typography */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Brand / accent */
  --color-bg:             #FFFFFF;
  --color-text-primary:   #0F172A;
  --color-text-secondary: #64748B;
  --color-text-muted:     #94A3B8;
  --color-accent:         #1E3A5F;
  --color-accent-light:   rgba(30, 58, 95, 0.07);
  --color-accent-hover:   rgba(30, 58, 95, 0.12);

  /* Timeline dots */
  --color-dot-active:     #1E3A5F;
  --color-dot-inactive:   #CBD5E1;

  /* Borders */
  --color-border:         #F1F5F9;
  --color-border-medium:  #E2E8F0;
  --color-border-focus:   rgba(30, 58, 95, 0.35);

  /* Semantic */
  --color-danger:         #EF4444;
  --color-danger-light:   rgba(239, 68, 68, 0.08);

  /* Share Trip ceremony (DS-028) */
  --color-share-trip:       #B45309;
  --color-share-trip-hover: #92400E;
  --color-confetti-gold:    #C9A84C;
  --color-confetti-champagne: #F5E6C8;

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  20px;
  --space-xl:  24px;
}

/* ─── Tokens — Dark mode ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             #0F172A;
    --color-text-primary:   #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-text-muted:     #475569;
    --color-accent:         #60A5FA;
    --color-accent-light:   rgba(96, 165, 250, 0.08);
    --color-accent-hover:   rgba(96, 165, 250, 0.14);
    --color-dot-active:     #60A5FA;
    --color-dot-inactive:   #334155;
    --color-border:         #1E293B;
    --color-border-medium:  #1E293B;
    --color-border-focus:   rgba(96, 165, 250, 0.4);
    --color-danger-light:   rgba(239, 68, 68, 0.1);
  }
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
a { text-decoration: none; color: inherit; }

/* ─── Global accessibility ───────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}