/* Direction: monsoon hilltop park — misty green canvas, roasted-corn amber accent, a soft serif display against clean sans body */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f3f6ec;
  --surface: #ffffff;
  --surface-2: #e8efdd;
  --border: #d6e0c8;
  --border-strong: #b3b2a6;
  --ink: #202b1c;
  --muted: #5c6a53;
  --accent: #d9861f;
  --accent-hover: #c3730f;
  --accent-ink: #2a1502;
  --accent-text: #9b5611;
  --accent-strong: #8a4c0d;
  --accent-soft: #f6e3c0;
  --accent-border: #e7c78a;
  --success: #2f7d3c;
  --success-ink: #ffffff;
  --success-soft: #dbe7d7;
  --success-strong: #2b7337;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ebe2d1;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #ecdcd3;
  --danger-strong: #b91c1c;
  --chart-1: #cc7a00;
  --chart-2: #72941b;
  --chart-3: #168b80;
  --chart-4: #2692de;
  --chart-5: #8a5bba;
  --chart-6: #da6786;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --radius-card: 20px;
  --radius-btn: 999px;
  --shadow-card: 0 20px 40px -24px rgba(32, 43, 28, 0.35);
  --x-on-photo: #fdfaf2;
  --x-mist: #eef3e1;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #100a03;
  --surface: #28231c;
  --surface-2: #1c1610;
  --border: #312c26;
  --border-strong: #58544f;
  --ink: #f3f6ec;
  --muted: #98988f;
  --accent: #d9861f;
  --accent-hover: #df9841;
  --accent-ink: #1e1304;
  --accent-text: #d9861f;
  --accent-strong: #d9861f;
  --accent-soft: #3c2509;
  --accent-border: #6a4210;
  --success: #2f7d3c;
  --success-ink: #ffffff;
  --success-soft: #172310;
  --success-strong: #5d9a67;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #341a04;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #350e09;
  --danger-strong: #d16969;
  --chart-1: #d9861f;
  --chart-2: #a3c857;
  --chart-3: #12988c;
  --chart-4: #68bafb;
  --chart-5: #9567c6;
  --chart-6: #fc8faa;
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */

@keyframes mist-drift {
  0% { transform: translateX(-6%) translateY(0); }
  50% { transform: translateX(4%) translateY(-2%); }
  100% { transform: translateX(-6%) translateY(0); }
}

.mist-layer {
  background: linear-gradient(180deg, rgba(238, 243, 225, 0.05) 0%, rgba(238, 243, 225, 0.55) 78%, rgba(238, 243, 225, 0.92) 100%),
    radial-gradient(60% 45% at 30% 20%, rgba(255, 255, 255, 0.35), transparent 70%);
  animation: mist-drift 18s ease-in-out infinite;
}

html.reduced-motion .mist-layer {
  animation: none;
}

@keyframes rain-fall {
  0% { background-position: 0 -40px; }
  100% { background-position: 0 400px; }
}

.rain-band {
  background-image: repeating-linear-gradient(115deg, rgba(253, 250, 242, 0.14) 0px, rgba(253, 250, 242, 0.14) 1px, transparent 1px, transparent 22px);
  animation: rain-fall 3.5s linear infinite;
}

html.reduced-motion .rain-band {
  animation: none;
}

/* Full-page ambient barish: fixed overlay, drops added by app.js */
.rain-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
}

.rain-drop {
  position: absolute;
  top: -12%;
  width: 1px;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, rgba(253, 250, 242, 0.55));
  animation-name: drop-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes drop-fall {
  to { transform: translateY(120vh); }
}

html.reduced-motion .rain-overlay {
  display: none;
}

/* A flash of lightning across a dark or photo band */
@keyframes lightning-flash {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: 0.6; }
  94% { opacity: 0.08; }
  95% { opacity: 0.4; }
  96% { opacity: 0; }
}

.lightning-layer {
  background: var(--x-on-photo);
  mix-blend-mode: overlay;
  animation: lightning-flash 8s ease-in-out infinite;
}

html.reduced-motion .lightning-layer {
  animation: none;
  opacity: 0;
}

/* Scrolling ambiance ticker */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 26s linear infinite;
}

html.reduced-motion .ticker-track {
  animation: none;
  flex-wrap: wrap;
}

/* Thunder icon pulse */
@keyframes thunder-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.thunder-pulse {
  animation: thunder-pulse 1.6s ease-in-out infinite;
}

html.reduced-motion .thunder-pulse {
  animation: none;
}