/* Dashtxtastic Design Tokens
 * Single source of truth for palette, typography, spacing, brand overrides.
 * Inlined into every generated HTML output at write time (see HtmlGenerator in
 * Phase 2+). Loaded by the admin shell via App.razor.
 *
 * Discipline (CONVENTIONS.md sections 11 and 12):
 *   - Razor templates must reference var(--token), never hex/rgb literals.
 *   - Hex/rgb values appear ONLY inside the palette section of this file.
 *   - Generated HTML inlines this file into a <style> block; no <link rel="stylesheet">.
 */

:root {
  /* === Brand-overridable (rewritten per user at generation time by BrandingService) === */
  --brand-primary: var(--navy);
  --brand-accent: var(--blue);
  --brand-logo-url: none;
  --brand-display-name: "Dashtxtastic";

  /* === Palette === */
  --navy: #1f2a5e;
  --navy-dark: #14204a;
  --green: #2f8f4f;
  --green-soft: #e6f3ea;
  --red: #b73b3b;
  --red-soft: #fbe6e6;
  --blue: #2a6fb5;
  --blue-soft: #e6eef8;
  --purple: #6b2d8c;
  --orange: #d96b2c;
  --orange-soft: #fdeee0;
  --amber: #d9a52c;
  --amber-soft: rgba(217, 165, 44, 0.13);
  --amber-dark: #946d11;

  /* === Neutrals === */
  --gray-100: #f4f4f6;
  --gray-200: #e5e6ea;
  --gray-300: #cfd1d6;
  --gray-500: #6b6e78;
  --gray-700: #383a42;
  --text: #1d1f26;
  --surface: #ffffff;
  --surface-inverse: #ffffff;

  /* === Pillar rotation (infographic templates, Phase 3 Tracks B + C) ===
   * Used by PillarPalette and the .pillar-{n} classes in
   * InfographicFlow.cshtml, InfographicBeforeAfter.cshtml, and
   * InfographicStages.cshtml. Order matches the skill: green, blue,
   * purple, orange. (Track C originally had blue/green/purple/orange;
   * harmonized to skill's order at integration — Pattern C templates
   * compute color via PillarPalette so the value-not-the-slot is what
   * matters.) */
  --pillar-1: var(--green);
  --pillar-2: var(--blue);
  --pillar-3: var(--purple);
  --pillar-4: var(--orange);

  /* === Infographic chip + band sizing (Phase 3 Tracks B + C) === */
  --font-size-band-header: 13px;
  --font-size-chip: 11.5px;
  --font-size-subtitle: 15px;
  --font-size-title: 28px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --space-xs: 7px;
  --space-sm: 10px;
  --space-md: 16px;

  /* === Typography === */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-base: 14px;
  --font-size-headline: 30px;
  --font-size-h1: 28px;
  /* Track C tokens — Track B's --font-size-subtitle and --font-size-band-header are
     declared in the chip/band sizing block above; not redeclared here per §7. */
  --font-size-card-title: 15px;
  --font-size-card-body: 13.5px;
  --font-size-badge: 16px;
  --font-size-footer-header: 12px;
  --font-size-arrow: 28px;
  --line-height-base: 1.6;

  /* === Layout === */
  --layout-max-width: 1080px;
  --layout-aside-width: 280px;
  --layout-breakpoint-narrow: 720px;
  --brand-logo-size: 32px;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 22px;
  --space-5: 32px;
  /* Track B/C infographic spacing aliases live in the chip+band sizing block above
     (--space-xs, --space-sm, --space-md). */

  /* === Radius + shadow === */
  --radius-1: 3px;
  --radius-2: 6px;
  --radius-md: 6px;
  /* --radius-sm and --radius-pill defined in the chip+band sizing block above. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 24px rgba(14, 17, 23, 0.18);
  --shadow-4: 0 24px 60px rgba(14, 17, 23, 0.28);
  /* Directional shadows for right-edge anchored panels (e.g. the project
     viewer's file drawer). Negative x offsets so the shadow falls toward the
     content side rather than off-screen. */
  --shadow-drawer-edge: -2px 0 8px rgba(0, 0, 0, 0.12);
  --shadow-drawer: -4px 0 16px rgba(0, 0, 0, 0.08);
  --scrim: rgba(14, 17, 23, 0.4);
  --scrim-strong: rgba(14, 17, 23, 0.45);

  /* === Status badge colors (Phase 3) ===
   * Referenced by Razor templates as --status-{slug} via StatusSlugger.ToSlug(). Adding a
   * new business status means adding a new token here AND letting it round-trip through
   * StatusSlugger; templates never hard-code hex literals.
   */
  --status-active: var(--green-soft);
  --status-active-text: var(--green);
  --status-blocked: var(--red-soft);
  --status-blocked-text: var(--red);
  --status-in-progress: var(--blue-soft);
  --status-in-progress-text: var(--blue);
  --status-on-hold: var(--orange-soft);
  --status-on-hold-text: var(--orange);
  --status-draft: var(--gray-100);
  --status-draft-text: var(--gray-700);
  --status-published: var(--green-soft);
  --status-published-text: var(--green);
  --status-archived: var(--gray-200);
  --status-archived-text: var(--gray-500);
  --status-done: var(--green-soft);
  --status-done-text: var(--green);
  --status-default: var(--gray-100);
  --status-default-text: var(--gray-700);

  /* === Dashboard grid (Phase 3) === */
  --tile-grid-columns: 3;
  --tile-grid-columns-md: 2;
  --tile-grid-columns-sm: 1;
  --tile-min-height: 160px;
  --tile-breakpoint-md: 1200px;
  --tile-breakpoint-sm: 700px;
}

/* === Minimal base styling for the admin shell ===
 * Body uses tokens so the running Blazor app visibly reflects the design system.
 * Generated HTML output gets its own per-mode layout on top of the same tokens.
 */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-stack);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--brand-primary);
  font-family: var(--font-stack);
}