/* Design tokens for the SaaS dashboard rebuild (Task 3 of the SaaS
   migration execution plan). Deliberately a SEPARATE file from theme.css:
   theme.css is the "Werkstatt" system shared by the public discovery/
   scoping forms and (until now) the admin SPA -- dark canvas, zero
   radius, one signal colour. This file is a distinct, admin-only visual
   identity, scoped to `.dashboard-shell` (see the theme.css exception
   below), so the public forms are completely unaffected.

   Three layers, per the token-architecture reference this was built
   against: primitive (raw values) -> semantic (purpose aliases) ->
   component (per-component tokens). Change semantic/component tokens
   for a re-theme; primitives should rarely move.

   Brand continuity: --signal (#ff9d35) from theme.css is reused as
   --color-accent here rather than adopting a new brand colour -- the
   direction is a new STRUCTURE (light surfaces, small radius, sidebar)
   for the same product identity, not a new brand. */

.dashboard-shell {
  /* === PRIMITIVES === */
  --dt-color-white: #ffffff;
  --dt-color-gray-50: #f8fafc;
  --dt-color-gray-100: #f1f5f9;
  --dt-color-gray-200: #e2e8f0;
  --dt-color-gray-300: #cbd5e1;
  --dt-color-gray-500: #64748b;
  --dt-color-gray-700: #334155;
  --dt-color-gray-900: #0f172a;

  --dt-color-orange-500: var(--signal, #ff9d35);
  --dt-color-orange-600: #e8830f;

  --dt-color-green-100: #dcfce7;
  --dt-color-green-700: #15803d;
  --dt-color-amber-100: #fef3c7;
  --dt-color-amber-800: #92400e;
  --dt-color-red-100: #fee2e2;
  --dt-color-red-700: #b91c1c;
  --dt-color-blue-100: #dbeafe;
  --dt-color-blue-700: #1d4ed8;

  --dt-space-1: 0.25rem;  /* 4px */
  --dt-space-2: 0.5rem;   /* 8px */
  --dt-space-3: 0.75rem;  /* 12px */
  --dt-space-4: 1rem;     /* 16px */
  --dt-space-5: 1.25rem;  /* 20px */
  --dt-space-6: 1.5rem;   /* 24px */
  --dt-space-8: 2rem;     /* 32px */
  --dt-space-12: 3rem;    /* 48px */

  --dt-font-size-xs: 0.75rem;
  --dt-font-size-sm: 0.8125rem;
  --dt-font-size-base: 0.9375rem;
  --dt-font-size-lg: 1.0625rem;
  --dt-font-size-xl: 1.375rem;
  --dt-font-size-2xl: 1.75rem;

  --dt-radius-sm: 0.25rem;  /* 4px */
  --dt-radius-md: 0.5rem;   /* 8px */
  --dt-radius-lg: 0.625rem; /* 10px */
  --dt-radius-full: 999px;  /* pills/dots only */

  --dt-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --dt-shadow-md: 0 2px 8px rgb(15 23 42 / 0.08);

  --dt-duration-fast: 120ms;
  --dt-duration-normal: 200ms;
  --dt-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* === SEMANTIC === */
  --dt-color-background: var(--dt-color-gray-50);
  --dt-color-surface: var(--dt-color-white);
  --dt-color-surface-sunken: var(--dt-color-gray-100);
  --dt-color-foreground: var(--dt-color-gray-900);
  --dt-color-foreground-muted: var(--dt-color-gray-500);
  --dt-color-border: var(--dt-color-gray-200);
  --dt-color-border-strong: var(--dt-color-gray-300);

  --dt-color-accent: var(--dt-color-orange-500);
  --dt-color-accent-hover: var(--dt-color-orange-600);
  --dt-color-accent-foreground: var(--dt-color-gray-900);

  --dt-color-destructive: #dc2626;
  --dt-color-destructive-foreground: var(--dt-color-white);

  /* Status colours -- reserved for badges/dots only (owner direction:
     muted red/green/yellow, never as large fills or backgrounds). Each
     pair is a light tint + a text-safe dark foreground, matched for
     4.5:1+ contrast. */
  --dt-status-neutral-bg: var(--dt-color-gray-100);
  --dt-status-neutral-fg: var(--dt-color-gray-700);
  --dt-status-info-bg: var(--dt-color-blue-100);
  --dt-status-info-fg: var(--dt-color-blue-700);
  --dt-status-success-bg: var(--dt-color-green-100);
  --dt-status-success-fg: var(--dt-color-green-700);
  --dt-status-warning-bg: var(--dt-color-amber-100);
  --dt-status-warning-fg: var(--dt-color-amber-800);
  --dt-status-danger-bg: var(--dt-color-red-100);
  --dt-status-danger-fg: var(--dt-color-red-700);

  --dt-font-display: "Cairo", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --dt-font-mono: "JetBrains Mono", "Cairo", ui-monospace, monospace;

  /* === COMPONENT === */
  --dt-sidebar-width: 15rem;      /* 240px */
  --dt-topbar-height: 3.5rem;     /* 56px */

  --dt-card-bg: var(--dt-color-surface);
  --dt-card-border: var(--dt-color-border);
  --dt-card-radius: var(--dt-radius-lg);
  --dt-card-padding: var(--dt-space-4);
  --dt-card-shadow: var(--dt-shadow-sm);

  --dt-badge-radius: var(--dt-radius-sm);
  --dt-badge-padding: 0.15rem 0.55rem;

  --dt-nav-item-radius: var(--dt-radius-md);
}

/* theme.css's `*{border-radius:0 !important}` still applies inside
   .dashboard-shell (a universal selector matches everything, scope or
   not) -- that's deliberately left alone so nothing outside this file
   changes. Every component rule in this file that wants a non-zero
   radius therefore also declares `!important`: same importance, but
   `.dashboard-shell .dt-card` (two classes) outranks theme.css's bare
   `*` (zero classes) on specificity, so the component value wins. Any
   new dashboard component added later must follow the same pattern or
   it will silently render at 0 radius. */

.dashboard-shell {
  background: var(--dt-color-background);
  color: var(--dt-color-foreground);
  font-family: var(--dt-font-display);
  min-height: 100vh;
}

/* Legacy-theme contrast bridge. dashboard.css's comment on
   .dashboard-shell .admin-shell explains that Task 3 deliberately left
   ClientList/ProjectList/TemplateList/etc. unrestyled -- they still use
   admin.css/theme.css, which reads --foreground/--muted-foreground/
   --surface/--border/--rule/--muted/--background off :root, tuned for
   theme.css's dark canvas (e.g. --foreground:#ebe7df, near-white). Since
   .dashboard-shell now paints an actual light background, every one of
   those un-migrated pages was rendering near-white text on a near-white
   page -- reported as "text colour close to the background" in client/
   project list testing. Re-pointing just these custom properties to
   their dt-* equivalents, scoped to .dashboard-shell, fixes contrast on
   every legacy-styled page at once without touching layout/spacing, and
   without affecting anything outside the shell (Login, the public
   forms), which still want theme.css's real dark values. --signal is
   deliberately left alone: it's a sparingly-used accent (links, active
   states, badge borders), not body text, so it isn't the "near-invisible
   text" being reported. */
.dashboard-shell {
  --background: var(--dt-color-background);
  --foreground: var(--dt-color-foreground);
  --surface: var(--dt-color-surface);
  --surface-raised: var(--dt-color-surface-sunken);
  --muted: var(--dt-color-surface-sunken);
  --muted-foreground: var(--dt-color-foreground-muted);
  --border: var(--dt-color-border);
  --rule: var(--dt-color-border);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-shell, .dashboard-shell * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}