/*
 * theme.css — SaleBoard: warm, professional dark dashboard.
 */
/* 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 {
  color-scheme: dark;
  --canvas: #1c2024;
  --surface: #23282d;
  --surface-2: #2a3035;
  --border: #41494e;
  --border-strong: #565f65;
  --ink: #f1f3f2;
  --muted: #aeb7b4;
  --accent: #5fa88a;
  --accent-hover: #6fbb9b;
  --accent-ink: #10231b;
  --accent-text: #83bfa5;
  --accent-strong: #a9d8c3;
  --accent-soft: #26372f;
  --accent-border: #3a5347;
  --success: #5fa88a;
  --success-ink: #10231b;
  --success-soft: #2b3e3a;
  --success-strong: #78b59c;
  --warning: #c49a50;
  --warning-ink: #241a06;
  --warning-soft: #413b2e;
  --warning-strong: #c9a25e;
  --danger: #b96d6d;
  --danger-ink: #260e0e;
  --danger-soft: #3f3134;
  --danger-strong: #c98e8e;
  --chart-1: #5FA88A;
  --chart-2: #C4A35A;
  --chart-3: #83BFA5;
  --chart-4: #B96D6D;
  --chart-5: #7fa7c4;
  --chart-6: #a98fd0;

  --x-gold: #C4A35A;
  --x-card-2: #32393F;
  --font-display: "Sora", 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: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 650;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -14px rgba(0,0,0,0.55);
  --shadow-raised: 0 12px 32px -12px rgba(0,0,0,0.6);
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --border: #dddfde;
  --border-strong: #b6bab8;
  --ink: #1c2024;
  --muted: #6d6f72;
  --accent: #5fa88a;
  --accent-hover: #518f75;
  --accent-ink: #0d1813;
  --accent-text: #447963;
  --accent-strong: #3f6f5b;
  --accent-soft: #e9f3ef;
  --accent-border: #b7d8ca;
  --success: #5fa88a;
  --success-ink: #1c2024;
  --success-soft: #ecf5f1;
  --success-strong: #447963;
  --warning: #c49a50;
  --warning-ink: #1c2024;
  --warning-soft: #f8f3ea;
  --warning-strong: #826635;
  --danger: #b96d6d;
  --danger-ink: #1c2024;
  --danger-soft: #f7eded;
  --danger-strong: #905555;
  --chart-1: #59a284;
  --chart-2: #3e9adb;
  --chart-3: #736cc2;
  --chart-4: #d075aa;
  --chart-5: #b3592c;
  --chart-6: #b48c15;
}

/*
 * 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.
 */

/* SaleBoard: sidebar nav link entrance + gold accent for highlighted stats */
.card canvas { max-width: 100%; }

@keyframes sb-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
main > * {
  animation: sb-fade-in 260ms var(--ease-out, ease) both;
}
html.reduced-motion main > * { animation: none; }