/* ============================================================================
   Corporate Intelligence — design tokens
   ============================================================================

   Two halves, like most design systems: the primitive palettes and scales
   first, then the semantic --p-* tokens (primary, surface, content, overlay,
   shadow) that components consume. app.css reads tokens only, never raw hex.

   The identity: blue for action, orange for attention, navy ink for text,
   neutrals with a faint blue bias. Dark mode swaps the ramps; it never
   inverts them.
   ============================================================================ */

:root {
  /* ─── Brand palettes ──────────────────────────────────────────────────────
     Verbatim from tokens.ts. brandBlue is the ink ramp (navy for text),
     brandAqua on #00A09B (the CTA colour). */

  --p-brand-blue-50: #eef1f4;
  --p-brand-blue-100: #d3dae2;
  --p-brand-blue-200: #b0bcc9;
  --p-brand-blue-300: #7f91a5;
  --p-brand-blue-400: #52667e;
  --p-brand-blue-500: #2b3b4e;
  --p-brand-blue-600: #22303f;
  --p-brand-blue-700: #1a2531;
  --p-brand-blue-800: #131c25;
  --p-brand-blue-900: #0d141a;
  --p-brand-blue-950: #080d11;

  --p-brand-aqua-50: #fff4ea;
  --p-brand-aqua-100: #ffe1c4;
  --p-brand-aqua-200: #ffc899;
  --p-brand-aqua-300: #ffab66;
  --p-brand-aqua-400: #f99640;
  --p-brand-aqua-500: #f28c28;
  --p-brand-aqua-600: #d9741a;
  --p-brand-aqua-700: #b45c12;
  --p-brand-aqua-800: #86440e;
  --p-brand-aqua-900: #5a2d0a;
  --p-brand-aqua-950: #331906;

  --p-brand-purple-50: #eef2f6;
  --p-brand-purple-100: #d9e1ea;
  --p-brand-purple-200: #b9c7d6;
  --p-brand-purple-300: #94a9bf;
  --p-brand-purple-400: #6c86a5;
  --p-brand-purple-500: #476488;
  --p-brand-purple-600: #3a5270;
  --p-brand-purple-700: #2f435b;
  --p-brand-purple-800: #253548;
  --p-brand-purple-900: #1b2836;
  --p-brand-purple-950: #111a24;

  /* Terracotta. In the design system this overrides the base preset'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 ──────────────────────────────────────────────────────────────
     the base preset's ramp, plus the 16px card radius the design system's .main-content uses. */
  --p-border-radius-sm: 2px;
  --p-border-radius-md: 2px;
  --p-border-radius-lg: 3px;
  --p-border-radius-xl: 3px;
  --app-radius-card: 3px;
  --app-radius-pill: 999px;

  /* ─── Motion ──────────────────────────────────────────────────────────────
     Mirrors theme/motion.ts. Keep the two in sync — the design system'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 the base preset'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;

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

  /* Action is a strong blue; ink stays navy. */
  --p-brand-action-400: #2f7fae;
  --p-brand-action-500: #0f5c8c;
  --p-brand-action-600: #0c4a70;
  --p-brand-action-700: #093a58;
  --p-primary-color: var(--p-brand-action-500);
  --p-primary-hover-color: var(--p-brand-action-600);
  --p-primary-active-color: var(--p-brand-action-700);
  --p-primary-contrast-color: #ffffff;
  /* The friendly touch: a warm green for welcome, hints and a thumbs-up. */
  --app-friendly-color: #0f9d76;
  --app-friendly-soft: color-mix(in srgb, #0f9d76 12%, transparent);
  --app-attention-color: var(--p-brand-aqua-500);
  --app-attention-soft: color-mix(in srgb, var(--p-brand-aqua-500) 16%, transparent);
  --app-font-display: Georgia, 'Times New Roman', serif;

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

  /* Sent-message bubble / selected-accent background. */
  --p-ci-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-brand-aqua-500) 14%, 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-brand-aqua-500) 32%, transparent);

  /* Elevation ramp. the base preset only ships overlay-specific shadows, so the design system adds
     a generic sm/md/lg/xl set — .main-content uses md. */
  /* Paper: no drop shadows; a hairline draws every edge. */
  --p-shadow-sm: none;
  --p-shadow-md: none;
  --p-shadow-lg: none;
  --p-shadow-xl: 0 0 0 1px var(--p-surface-300);

  /* Status colours. Danger tracks the brand terracotta rather than a generic
     red so destructive buttons match the design system'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-aqua-700);

  /* Link colours. the design system 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: #0f5c8c;
  --app-link-hover-color: #093a58;

  /* 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: #476488;
  --app-chart-series-2: #f28c28;
  --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: the design system's aqua→periwinkle wash, the single most
     recognisable thing about the product. Values verified against the design system'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 (the design system's card is
     full-bleed, the app's is a centred column), so fix it in the layout. */
  --app-ground: #f3f4f6;

  color-scheme: light;
}

/* ─── Dark colour scheme ────────────────────────────────────────────────────
   The dark ramp follows the base preset'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-ci-blue-50: #32363f;
  --p-ci-blue-100: #53575f;
  --p-ci-blue-200: #73777d;
  --p-ci-blue-300: #a3a7ab;
  --p-ci-blue-400: #c7c9cc;
  --p-ci-blue-500: #ebf0f2;

  --p-primary-color: #5aa9d6;
  --p-primary-hover-color: #7fc0e6;
  --p-primary-active-color: #a6d5ef;
  --p-primary-contrast-color: #0d141a;
  --app-friendly-color: #5fcf95;
  --app-friendly-soft: color-mix(in srgb, #5fcf95 16%, transparent);
  --app-attention-color: var(--p-brand-aqua-400);
  --app-attention-soft: color-mix(in srgb, var(--p-brand-aqua-400) 20%, transparent);

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

  --p-ci-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) 22%, 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: 0 0 0 1px var(--p-surface-700);

  --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
     the design system leaves it a literal too. */
  --app-ground: #12161f;

  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;
  }
}