/*
 * theme.css — Candid's design-system values.
 *
 * Mood: kinetic + bold-geometric. A wall of real photographs, tilted and
 * overlapping, with the wordmark's warm gradient as the one quiet accent.
 * Everything else reads off the four approved brand colours below.
 */

:root {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --border: #e6e6e6;
  --border-strong: #c9c9c9;
  --ink: #262626;
  --muted: #6a6a6a;

  --accent: #0095f6;
  --accent-hover: #0081d6;
  --accent-ink: #2c2c2c;
  --accent-text: #be285b;
  --accent-strong: #006bb0;
  --accent-soft: #e6f4ff;
  --accent-border: #b6e2ff;

  --success: #2e7d32;
  --success-ink: #ffffff;
  --success-soft: #e6f4ea;
  --success-strong: #1b5e20;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #fdf1e0;
  --warning-strong: #92400e;
  --danger: #d92d20;
  --danger-ink: #ffffff;
  --danger-soft: #fde8e6;
  --danger-strong: #b42318;

  --chart-1: #0095f6;
  --chart-2: #be285b;
  --chart-3: #f0983b;
  --chart-4: #6228d7;
  --chart-5: #00b894;
  --chart-6: #6a6a6a;

  --font-display: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 900;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 8px;
  --radius-card: 8px;
  --radius-input: 8px;
  --border-w: 2px;
  --border-strong-w: 2px;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-raised: 0 24px 60px rgba(0, 0, 0, 0.22);
  --shadow-btn: 0 3px 0 rgba(0, 0, 0, 0.85);
  --card-pad: 1.5rem;
  --btn-weight: 800;
  --measure: 62ch;

  /* Candid's own tokens — the wordmark gradient and the collage's frame ink. */
  --x-brand-gradient: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%);
  --x-frame: #ffffff;
  --x-tile-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  /* A deliberately fixed dark band, independent of the light/dark switch. */
  --x-band-bg: #0d0d0d;
  --x-band-ink: #f5f5f5;
}

html[data-theme="dark"] {
  --canvas: #0a0a0a;
  --surface: #141414;
  --surface-2: #1f1f1f;
  --border: #2b2b2b;
  --border-strong: #404040;
  --ink: #f5f5f5;
  --muted: #a8a8a8;

  --accent: #1ea1ff;
  --accent-hover: #47b1ff;
  --accent-ink: #0a0a0a;
  --accent-text: #ff6f9c;
  --accent-strong: #4fc3ff;
  --accent-soft: #0d2a3d;
  --accent-border: #1f4a63;

  --success: #3fa246;
  --success-ink: #0a0a0a;
  --success-soft: #16321c;
  --success-strong: #6fcf76;
  --warning: #d97b28;
  --warning-ink: #0a0a0a;
  --warning-soft: #3a2712;
  --warning-strong: #f0a862;
  --danger: #ef5350;
  --danger-ink: #0a0a0a;
  --danger-soft: #3a1a19;
  --danger-strong: #ff8783;

  --chart-1: #1ea1ff;
  --chart-2: #ff6f9c;
  --chart-3: #f5ab5e;
  --chart-4: #9b7bf0;
  --chart-5: #2fd9a8;
  --chart-6: #a8a8a8;

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 3px 0 rgba(0, 0, 0, 0.9);

  --x-frame: #141414;
  --x-tile-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  --x-band-bg: #0d0d0d;
  --x-band-ink: #f5f5f5;
}

/*
 * app.css — Candid's own CSS. The collage hero (a mosaic of tilted photo
 * frames with the headline dropped into one cell), the fixed dark statement
 * band, the story ring and the mocked DM bubble. Everything else is
 * utilities over the primitives. Tokens only.
 */

/* ---- The wordmark: the one gradient in the whole app. ------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--display-tracking);
  background-image: var(--x-brand-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ---- The hero collage: a dense mosaic, edge to edge, each photo a tilted
   print sitting slightly proud of its cell so the wall overlaps itself. ---- */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 84px;
  grid-auto-flow: dense;
  gap: 3px;
  padding: 3px;
  background: var(--surface-2);
}
@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 118px;
    gap: 6px;
    padding: 6px;
  }
}

.hero-tile {
  position: relative;
}
.hero-tile-frame {
  position: absolute;
  inset: 7%;
  overflow: hidden;
  border: 4px solid var(--x-frame);
  border-radius: var(--radius-card);
  box-shadow: var(--x-tile-shadow);
  background: var(--surface-2);
  opacity: 0;
  animation: tile-in 640ms var(--ease-out, ease) both;
}
.hero-tile-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-tile--headline {
  overflow: hidden;
}
.hero-headline-card {
  position: absolute;
  inset: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 1.1rem;
  box-shadow: var(--x-tile-shadow);
  opacity: 0;
  animation: tile-in 640ms var(--ease-out, ease) both;
  animation-delay: 420ms;
}
@media (min-width: 768px) {
  .hero-headline-card { padding: 2rem; }
}

@keyframes tile-in {
  from { opacity: 0; transform: translateY(22px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Stagger the wall in, cell by cell — the ONE moment on this page that moves. */
.hero-tile:nth-child(1) .hero-tile-frame  { animation-delay: 0ms; }
.hero-tile:nth-child(2) .hero-tile-frame  { animation-delay: 40ms; }
.hero-tile:nth-child(3) .hero-tile-frame  { animation-delay: 80ms; }
.hero-tile:nth-child(5) .hero-tile-frame  { animation-delay: 120ms; }
.hero-tile:nth-child(6) .hero-tile-frame  { animation-delay: 160ms; }
.hero-tile:nth-child(7) .hero-tile-frame  { animation-delay: 200ms; }
.hero-tile:nth-child(8) .hero-tile-frame  { animation-delay: 240ms; }
.hero-tile:nth-child(9) .hero-tile-frame  { animation-delay: 280ms; }
.hero-tile:nth-child(10) .hero-tile-frame { animation-delay: 320ms; }
.hero-tile:nth-child(11) .hero-tile-frame { animation-delay: 360ms; }
.hero-tile:nth-child(12) .hero-tile-frame { animation-delay: 400ms; }
.hero-tile:nth-child(13) .hero-tile-frame { animation-delay: 440ms; }
.hero-tile:nth-child(14) .hero-tile-frame { animation-delay: 480ms; }
.hero-tile:nth-child(15) .hero-tile-frame { animation-delay: 520ms; }
.hero-tile:nth-child(16) .hero-tile-frame { animation-delay: 560ms; }

html.reduced-motion .hero-tile-frame,
html.reduced-motion .hero-headline-card {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ---- The story ring: a gradient halo around a circular avatar. ---------- */
.story-ring {
  display: block;
  padding: 4px;
  border-radius: 9999px;
  background: var(--x-brand-gradient);
}

/* ---- The dark statement band — fixed dark in both modes on purpose. ---- */
.band-dark {
  background: var(--x-band-bg);
  color: var(--x-band-ink);
}

/* ---- The mocked DM bubble sitting over the bench photo. ----------------- */
.dm-bubble {
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px 999px 4px 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-raised);
}