/* ============================================================================
   Dualog Insight — Workspace design system layer
   ============================================================================

   A hand-port of @dualog/workspace-design-system into plain CSS. Insight's UI
   is vanilla JS, so it can't consume the Angular package; this file mirrors the
   package's two halves instead:

     theme/tokens.ts   → the palettes, surface ramps and type/space scales below
     theme/preset.ts   → the semantic --p-* tokens (primary, surface, content,
                         overlay, shadow) that the PrimeNG Aura preset emits
     styles/base.scss  → the reset + brand typography at the bottom

   Variable names deliberately match what Workspace emits at runtime (--p-* for
   theme tokens, --app-* for the type/space/motion scales) so anyone who knows
   that codebase recognises these, and so a future re-sync is a diff rather than
   a re-reading.

   WHEN WORKSPACE CHANGES: re-port from
   Workspace/projects/workspace-design-system/src/lib/theme/tokens.ts. Only this
   file should need touching — app.css consumes tokens, never raw hex.

   Ported from Workspace @ 785fb601.
   ============================================================================ */

:root {
  /* ─── Brand palettes ──────────────────────────────────────────────────────
     Verbatim from tokens.ts. brandBlue centres on #02405A (Dualog brand blue),
     brandAqua on #00A09B (the CTA colour). */

  --p-brand-blue-50: #ebf0f2;
  --p-brand-blue-100: #c2d1d8;
  --p-brand-blue-200: #9ab3bd;
  --p-brand-blue-300: #5d8596;
  --p-brand-blue-400: #306378;
  --p-brand-blue-500: #02405a;
  --p-brand-blue-600: #023449;
  --p-brand-blue-700: #022a3b;
  --p-brand-blue-800: #031f2b;
  --p-brand-blue-900: #031820;
  --p-brand-blue-950: #031116;

  --p-brand-aqua-50: #eff5f5;
  --p-brand-aqua-100: #cee3e2;
  --p-brand-aqua-200: #a2cdcb;
  --p-brand-aqua-300: #69b5b2;
  --p-brand-aqua-400: #25bbb4;
  --p-brand-aqua-500: #00a09b;
  --p-brand-aqua-600: #00857e;
  --p-brand-aqua-700: #006661;
  --p-brand-aqua-800: #054844;
  --p-brand-aqua-900: #062d2b;
  --p-brand-aqua-950: #061818;

  --p-brand-purple-50: #e4ebff;
  --p-brand-purple-100: #dae2fe;
  --p-brand-purple-200: #d1ddfe;
  --p-brand-purple-300: #aec4fd;
  --p-brand-purple-400: #8caafd;
  --p-brand-purple-500: #7090e0;
  --p-brand-purple-600: #5a78c3;
  --p-brand-purple-700: #5369a2;
  --p-brand-purple-800: #4c5b81;
  --p-brand-purple-900: #444f70;
  --p-brand-purple-950: #3b4660;

  /* Terracotta. In Workspace this overrides Aura's red primitive so
     severity="danger" picks it up automatically. */
  --p-brand-red-50: #fdf2f1;
  --p-brand-red-100: #f9dfdc;
  --p-brand-red-200: #f2bbb6;
  --p-brand-red-300: #e89389;
  --p-brand-red-400: #d9685e;
  --p-brand-red-500: #c15a51;
  --p-brand-red-600: #a34a43;
  --p-brand-red-700: #7e3a35;
  --p-brand-red-800: #5a2a27;
  --p-brand-red-900: #381b19;
  --p-brand-red-950: #1f0f0e;

  /* ─── Type & spacing scales ───────────────────────────────────────────────
     Type is rem so it scales with the user's font-size (a11y); spacing is px so
     layouts stay stable. Base body = sm (14px). */

  --app-text-2xs: 0.625rem;
  --app-text-xs: 0.75rem;
  --app-text-sm: 0.875rem;
  --app-text-base: 1rem;
  --app-text-lg: 1.125rem;
  --app-text-xl: 1.25rem;
  --app-text-2xl: 1.5rem;
  --app-text-3xl: 2rem;
  --app-text-display: 3rem;

  --app-space-2: 2px;
  --app-space-4: 4px;
  --app-space-8: 8px;
  --app-space-12: 12px;
  --app-space-16: 16px;
  --app-space-20: 20px;
  --app-space-24: 24px;
  --app-space-32: 32px;
  --app-space-40: 40px;
  --app-space-48: 48px;

  --app-font-regular: 400;
  --app-font-medium: 500;
  --app-font-semibold: 600;
  --app-font-bold: 700;

  --app-leading-none: 1;
  --app-leading-tight: 1.2;
  --app-leading-normal: 1.4;
  --app-leading-relaxed: 1.6;

  /* ─── Radius ──────────────────────────────────────────────────────────────
     Aura's ramp, plus the 16px card radius Workspace's .main-content uses. */
  --p-border-radius-sm: 4px;
  --p-border-radius-md: 6px;
  --p-border-radius-lg: 8px;
  --p-border-radius-xl: 12px;
  --app-radius-card: 16px;
  --app-radius-pill: 999px;

  /* ─── Motion ──────────────────────────────────────────────────────────────
     Mirrors theme/motion.ts. Keep the two in sync — Workspace's WAAPI
     animations can't read CSS custom properties, so it duplicates them in TS. */
  --app-duration-fast: 120ms;
  --app-duration-base: 200ms;
  --app-duration-slow: 300ms;
  --app-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --app-ease-emphasized: cubic-bezier(0.19, 1, 0.22, 1);
  --app-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ─── Light colour scheme ─────────────────────────────────────────────────
     The light surface ramp is compressed — 0–200 spans #FFFFFF to #F7F8F8 — so
     content borders sit at surface.300, not Aura's surface.200 (invisible on
     white). */

  --p-surface-0: #ffffff;
  --p-surface-50: #fdfdfd;
  --p-surface-100: #fbfbfb;
  --p-surface-200: #f7f8f8;
  --p-surface-300: #e3e4e5;
  --p-surface-400: #d1d2d4;
  --p-surface-500: #b0b1b3;
  --p-surface-600: #8a8b8d;
  --p-surface-700: #636466;
  --p-surface-800: #3d3e40;
  --p-surface-900: #1e1e1e;
  --p-surface-950: #121212;

  /* dualogBlue — brand blue in light, warm neutral grays in dark. This is the
     token body text and headings hang off, so it flips wholesale by scheme. */
  --p-dualog-blue-50: var(--p-brand-blue-50);
  --p-dualog-blue-100: var(--p-brand-blue-100);
  --p-dualog-blue-200: var(--p-brand-blue-200);
  --p-dualog-blue-300: var(--p-brand-blue-300);
  --p-dualog-blue-400: var(--p-brand-blue-400);
  --p-dualog-blue-500: var(--p-brand-blue-500);

  --p-primary-color: var(--p-brand-aqua-500);
  --p-primary-hover-color: var(--p-brand-aqua-600);
  --p-primary-active-color: var(--p-brand-aqua-700);
  --p-primary-contrast-color: #ffffff;

  --p-content-background: var(--p-surface-0);
  --p-content-border-color: var(--p-surface-300);
  --p-text-color: var(--p-dualog-blue-500);
  --p-text-muted-color: var(--p-surface-600);

  /* Sent-message bubble / selected-accent background. */
  --p-dualog-purple-subtle: var(--p-brand-purple-50);

  --p-form-field-background: var(--p-surface-0);
  --p-form-field-border-color: var(--p-surface-300);
  --p-form-field-hover-border-color: var(--p-surface-400);

  --p-overlay-background: var(--p-surface-0);
  --p-overlay-border-color: var(--p-surface-300);

  /* Decorative selection tint — "clearly indicated, not overpowering". No WCAG
     ratio to hit; opacity tuned against the surface beneath. */
  --p-selection-background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);

  /* Selected nav tab. Deliberately stronger than --p-selection-background:
     that one is tuned against white surfaces (sidebar rows, table rows), but
     the header is transparent over the aqua ground, so the same 12% barely
     separates from what's already behind it. */
  --app-nav-selected-background: color-mix(in srgb, var(--p-primary-color) 30%, transparent);

  /* Elevation ramp. Aura only ships overlay-specific shadows, so Workspace adds
     a generic sm/md/lg/xl set — .main-content uses md. */
  --p-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --p-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --p-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --p-shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Status colours. Danger tracks the brand terracotta rather than a generic
     red so destructive buttons match Workspace's severity="danger". */
  --p-danger-color: var(--p-brand-red-500);
  --p-danger-hover-color: var(--p-brand-red-600);
  --p-danger-contrast-color: #ffffff;
  --p-success-color: #0f9d76;
  --p-warning-color: #b7791f;
  --p-info-color: var(--p-brand-purple-600);

  /* Link colours. Workspace keeps these outside the preset because custom
     semantic tokens don't reliably emit as CSS vars in @primeuix/themes 2.0.3;
     the --app-link-* shim is canonical there too. */
  --app-link-color: #0066cc;
  --app-link-hover-color: #0052a3;

  /* Analytics chart palette. Keep :root and body.dark in sync — the dark set
     is nudged lighter rather than reused, so series stay distinguishable
     against surface.900. Read from JS via getComputedStyle, so a scheme change
     needs the charts re-rendered. */
  --app-chart-series-1: #00a09b;
  --app-chart-series-2: #7090e0;
  --app-chart-series-3: #b5811f;
  --app-chart-series-4: #2e6da4;
  --app-chart-series-5: #347435;
  --app-chart-other: #8a929b;
  --app-chart-grid: rgba(148, 163, 184, 0.18);
  --app-chart-previous: #94a3b8;

  /* The app ground: Workspace's aqua→periwinkle wash, the single most
     recognisable thing about the product. Values verified against Workspace's
     live computed style — keep them byte-identical, in this hex-with-alpha
     form, so a future diff against the browser is trivial.

     Don't "lighten" this by raising the white veil. The veil desaturates as it
     lightens, and the wash turns grey well before it turns bright. If it reads
     too heavy, the cause is how much ground is exposed (Workspace's card is
     full-bleed, Insight's is a centred column), so fix it in the layout. */
  --app-ground:
    linear-gradient(to bottom, #ffffff1f, #ffffff1f),
    linear-gradient(to bottom, #00a09b4d, #8caafd4d);

  color-scheme: light;
}

/* ─── Dark colour scheme ────────────────────────────────────────────────────
   The dark ramp follows Aura's convention (0 = lightest, 950 = darkest), which
   is inverted relative to light — so tokens, not raw ramp steps, are what app
   code may reference. */

body.dark {
  --p-surface-0: #fbfbfb;
  --p-surface-50: #f7f8f8;
  --p-surface-100: #e3e4e5;
  --p-surface-200: #d1d2d4;
  --p-surface-300: #b0b1b3;
  --p-surface-400: #8a8b8d;
  --p-surface-500: #6a6b6e;
  --p-surface-600: #5d5e61;
  --p-surface-700: #3b3d44;
  --p-surface-800: #2c3038;
  --p-surface-900: #232730;
  --p-surface-950: #1a1d24;

  /* Warm neutral grays stand in for brand blue — verified brand values
     (except 400, generated). */
  --p-dualog-blue-50: #32363f;
  --p-dualog-blue-100: #53575f;
  --p-dualog-blue-200: #73777d;
  --p-dualog-blue-300: #a3a7ab;
  --p-dualog-blue-400: #c7c9cc;
  --p-dualog-blue-500: #ebf0f2;

  --p-primary-color: var(--p-brand-aqua-600);
  --p-primary-hover-color: var(--p-brand-aqua-500);
  --p-primary-active-color: var(--p-brand-aqua-400);
  --p-primary-contrast-color: #ffffff;

  --p-content-background: var(--p-surface-900);
  --p-content-border-color: var(--p-surface-700);
  --p-text-color: var(--p-dualog-blue-500);
  --p-text-muted-color: var(--p-surface-300);

  --p-dualog-purple-subtle: var(--p-brand-purple-800);

  --p-form-field-background: var(--p-surface-950);
  --p-form-field-border-color: var(--p-surface-700);
  --p-form-field-hover-border-color: var(--p-surface-600);

  /* Overlays need a visibly lighter edge than content: surface.700 (#3B3D44)
     is too close to the surface.900 backdrop to register, so overlays step up
     to surface.600. */
  --p-overlay-background: var(--p-surface-900);
  --p-overlay-border-color: var(--p-surface-600);

  /* Anchored on brandAqua.400 rather than primary-color — brandAqua.600 is too
     low-luminance to read as a tint on surface.900, and raising the opacity
     just muddied it. If primary ever leaves the brandAqua family, revisit. */
  --p-selection-background: color-mix(in srgb, var(--p-brand-aqua-400) 25%, transparent);

  /* Anchored on brandAqua.400 for the same reason as the token above —
     primary-color resolves to brandAqua.600 in dark, too low-luminance to read
     as a tint against the dark ground no matter what opacity you give it. */
  --app-nav-selected-background: color-mix(in srgb, var(--p-brand-aqua-400) 30%, transparent);

  /* Black shadows on dark surfaces have a hard perceptual ceiling; pushing past
     it looks muddy rather than elevated. Following Slack, dark mode drops
     shadows entirely and leans on borders for elevation. */
  --p-shadow-sm: none;
  --p-shadow-md: none;
  --p-shadow-lg: none;
  --p-shadow-xl: none;

  --p-danger-color: var(--p-brand-red-400);
  --p-danger-hover-color: var(--p-brand-red-300);
  --p-success-color: #34d3a4;
  --p-warning-color: #e0a340;
  --p-info-color: var(--p-brand-purple-400);

  --app-link-color: #71b9ff;
  --app-link-hover-color: #4d9aff;

  --app-chart-series-1: #06a49e;
  --app-chart-series-2: #7392dc;
  --app-chart-series-3: #be8830;
  --app-chart-series-4: #3576af;
  --app-chart-series-5: #3d7d3e;
  --app-chart-other: #9aa3ad;
  --app-chart-grid: rgba(148, 163, 184, 0.22);
  --app-chart-previous: #64748b;

  /* #303d61 is a bespoke deep-purple anchor — it sits between brandPurple.950
     (#3B4660) and black and doesn't fit the purple ramp's hue/saturation, so
     Workspace leaves it a literal too. */
  --app-ground: linear-gradient(to bottom, var(--p-brand-aqua-800), #303d61);

  color-scheme: dark;
}

/* ============================================================================
   Reset + brand typography  (port of styles/base.scss)
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--app-text-base);
  line-height: 1.5;
  color: var(--p-text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Native controls inherit the surrounding font/colour by default; components
   that need their own contrast (buttons on a solid fill) set it explicitly. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  color: var(--p-text-color);
}

p {
  margin: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Honour the OS reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}