@import 'tailwindcss';

/* Tailwind v4 auto content-detection roots at this app and never sees the
   workspace component library or the ui-primitives package — declare them so
   their utility classes are generated. Without this the deck renders unstyled. */
@source '../../../../packages/deck-ui/src';
@source '../../node_modules/@platform-modules/ui-primitives/dist';

@import '@platform-modules/ui-tokens/base.css';
@import '@platform-modules/ui-tokens/theme.css';
@import '@overdeck/deck-ui/tokens.css';

/* Palette pinned from docs/mockups/deck-overview-v2.html / deck-decisions-v3.html
   :root CSS vars (dark) and the ".light" preview block (light). Dark is default;
   [data-theme] is set by the FOUC-safe inline script in Base.astro. */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --mod-color-bg: #08090c;
  --mod-color-surface: #16181d;
  --mod-color-surface-raised: #1b1e24;
  --mod-color-border: #262a32;
  --mod-color-border-strong: #33405c;
  --mod-color-fg: #e6e9ef;
  --mod-color-fg-muted: #8b93a3;
  --mod-color-fg-subtle: #5c6474;
  --mod-color-accent: #7aa2f7;
  --mod-color-accent-fg: #10131a;
  --mod-color-success: #9ece6a;
  --mod-color-warning: #e0af68;
  --mod-color-danger: #f7768e;
  --mod-color-info: #4fd6be;
  --mod-color-success-fg: #0e1512;
  --mod-color-warning-fg: #16120c;
  --mod-color-danger-fg: #ffffff;
  --mod-color-info-fg: #0e1512;
}

:root[data-theme='light'] {
  color-scheme: light;
  --mod-color-bg: #f7f8fa;
  --mod-color-surface: #ffffff;
  --mod-color-surface-raised: #ffffff;
  --mod-color-border: #e3e6eb;
  --mod-color-border-strong: #c7ccd6;
  --mod-color-fg: #1c2430;
  --mod-color-fg-muted: #6b7488;
  --mod-color-fg-subtle: #9aa2b1;
  --mod-color-accent: #4c6ef5;
  --mod-color-accent-fg: #ffffff;
  --mod-color-success: #1f7a4d;
  --mod-color-warning: #a3690a;
  --mod-color-danger: #c23652;
  --mod-color-info: #14806f;
  --mod-color-success-fg: #ffffff;
  --mod-color-warning-fg: #ffffff;
  --mod-color-danger-fg: #ffffff;
  --mod-color-info-fg: #ffffff;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
}

:root,
:root[data-theme='dark'] {
  --deck-page-bg: #08090c;
  --deck-nav-scrim: color-mix(in srgb, var(--mod-color-bg) 35%, transparent);
  --deck-shell-shadow: 0 20px 60px color-mix(in srgb, #000 55%, transparent);
}

:root[data-theme='light'] {
  --deck-page-bg: #eef0f4;
  --deck-nav-scrim: color-mix(in srgb, var(--mod-color-fg) 18%, transparent);
  --deck-shell-shadow: 0 20px 60px color-mix(in srgb, var(--mod-color-fg) 12%, transparent);
}
