/*
 * theme.css — Arazede Agora. Written from the approved design brief.
 * Opens DARK (crepúsculo sobre os arrozais). Light mode is a genuine second
 * palette, not an inversion. Custom app tokens are prefixed --x-.
 */

:root {
  color-scheme: dark;
  --canvas: #14101f;
  --surface: #2c2835;
  --surface-2: #221e2c;
  --border: #3a3542;
  --border-strong: #4d4757;
  --ink: #f5ecdd;
  --muted: #9b9491;
  --accent: #ffb238;
  --accent-hover: #e6991f;
  --accent-ink: #1a1208;
  --accent-text: #ff6a4d;
  --accent-strong: #ffb238;
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 42%, transparent);
  --success: #5a7a3a;
  --success-ink: #ffffff;
  --success-soft: color-mix(in srgb, var(--success) 22%, var(--surface));
  --success-strong: #8fbf6a;
  --warning: #a8571f;
  --warning-ink: #ffffff;
  --warning-soft: color-mix(in srgb, var(--warning) 24%, var(--surface));
  --warning-strong: #e2924f;
  --danger: #c23b3b;
  --danger-ink: #ffffff;
  --danger-soft: color-mix(in srgb, var(--danger) 24%, var(--surface));
  --danger-strong: #e78a8a;
  --chart-1: #ffb238;
  --chart-2: #ff6a4d;
  --chart-3: #8fbf6a;
  --chart-4: #4fb3c9;
  --chart-5: #b98fe0;
  --chart-6: #e88fb0;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 0.75rem;
  --radius-card: 0.875rem;
  --radius-input: 0.75rem;
  --border-w: 1px;
  --border-strong-w: 1px;
  --card-pad: 1.75rem;
  --shadow-card: 0 10px 28px -14px color-mix(in srgb, #000000 55%, transparent);
  --shadow-raised: 0 24px 56px -20px color-mix(in srgb, #000000 65%, transparent);
  --shadow-btn: 0 10px 22px -10px color-mix(in srgb, var(--accent) 60%, transparent);

  --gradient-sunset: linear-gradient(120deg, #ff6a4d 0%, #ffb238 55%, #ffd88a 100%);
  --gradient-dusk: linear-gradient(180deg, rgba(20, 16, 31, 0.05) 0%, rgba(20, 16, 31, 0.55) 55%, rgba(20, 16, 31, 0.94) 100%);

  /* Fixed light ink for the ticker and the photo hero: both sit on a ground
     that is dark regardless of the site's own light/dark mode (the ticker's
     own dark strip, the sunset photo under --gradient-dusk), so their text
     stays this one warm-white in BOTH modes — it must not flip with --ink. */
  --x-scrim-ink: #fdf6ec;
  --x-scrim-muted: color-mix(in srgb, #fdf6ec 74%, transparent);
  --x-scrim-faint: color-mix(in srgb, #fdf6ec 52%, transparent);
  --x-scrim-wash: color-mix(in srgb, #fdf6ec 16%, transparent);
  --x-scrim-border: color-mix(in srgb, #fdf6ec 22%, transparent);
  --x-scrim-dim: color-mix(in srgb, #000000 32%, transparent);

  --x-ticker-bg: #0d0a15;
  --x-ticker-ink: #f5ecdd;
  --x-ticker-muted: #948d8a;
  --x-footer-bg: #0d0a15;
  --x-footer-ink: #f5ecdd;
  --x-footer-muted: #948d8a;
  --x-band-bg: #24341b;
  --x-band-ink: #eef3df;
  --x-band-muted: #b6c6a1;
  --x-paddy: #8fbf6a;
  --x-river: #4fb3c9;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #fbf3e7;
  --surface: #fffaf2;
  --surface-2: #f3e6d3;
  --border: #e6d7bd;
  --border-strong: #cdb896;
  --ink: #2b2420;
  --muted: #6b5f52;
  --accent: #e08a2a;
  --accent-hover: #c77820;
  --accent-ink: #1c1206;
  --accent-text: #b83e22;
  --accent-strong: #8a5215;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --success: #4a6b2e;
  --success-ink: #ffffff;
  --success-soft: color-mix(in srgb, var(--success) 16%, var(--surface));
  --success-strong: #3c5726;
  --warning: #a8571f;
  --warning-ink: #ffffff;
  --warning-soft: color-mix(in srgb, var(--warning) 16%, var(--surface));
  --warning-strong: #7a3d13;
  --danger: #b3352f;
  --danger-ink: #ffffff;
  --danger-soft: color-mix(in srgb, var(--danger) 16%, var(--surface));
  --danger-strong: #8a2620;
  --chart-1: #e08a2a;
  --chart-2: #b83e22;
  --chart-3: #4a6b2e;
  --chart-4: #2f6f80;
  --chart-5: #6a4a8a;
  --chart-6: #a5476b;

  --shadow-card: 0 10px 26px -16px color-mix(in srgb, var(--ink) 35%, transparent);
  --shadow-raised: 0 22px 48px -20px color-mix(in srgb, var(--ink) 40%, transparent);
  --shadow-btn: 0 10px 20px -10px color-mix(in srgb, var(--accent) 45%, transparent);

  --gradient-sunset: linear-gradient(120deg, #b83e22 0%, #e08a2a 55%, #f2c26a 100%);
  --gradient-dusk: linear-gradient(180deg, rgba(20, 16, 31, 0.05) 0%, rgba(20, 16, 31, 0.45) 55%, rgba(20, 16, 31, 0.88) 100%);

  --x-band-bg: #e9f0da;
  --x-band-ink: #223317;
  --x-band-muted: #56684a;
  --x-paddy: #4a6b2e;
  --x-river: #2f6f80;
}

/*
 * app.css — Arazede Agora's own rules: the ticker marquee, the gradient
 * headline text, and smooth in-page scrolling for the centered nav's anchor
 * links. Everything else is primitives + utilities. Tokens only.
 */

html {
  scroll-behavior: smooth;
}
html.reduced-motion {
  scroll-behavior: auto;
}

/* Anchors under the sticky bar should not tuck their heading behind it. */
#hoje, #agenda, #semana, #informacao, #noticias {
  scroll-margin-top: 5rem;
}

/* The one continuous motion on the page: the warnings ticker. Two copies of
   the same row sit side by side and slide left by exactly half their
   combined width, so the loop has no seam. */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-track {
  animation: ticker-scroll 38s linear infinite;
}
html.reduced-motion .ticker-track {
  animation: none;
}

/* The hero headline's sunset-gradient word. */
.gradient-ink {
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Text and washes over the ticker's dark strip and the photo hero — both
   grounds stay dark in EITHER site mode, so this reads with --x-scrim-*
   tokens instead of the mode-switching --ink/--surface ones. */
.scrim-ink { color: var(--x-scrim-ink); }
.scrim-muted { color: var(--x-scrim-muted); }
.scrim-faint { color: var(--x-scrim-faint); }
.scrim-wash { background-color: var(--x-scrim-wash); }
.scrim-dim { background-color: var(--x-scrim-dim); }
.scrim-border { border-color: var(--x-scrim-border); }