theme.css

/* =============================================================================
   @pareo/tokens — the single source of truth for the Pareo design system.

   Framework-agnostic. Consumed by every Pareo surface (marketing site,
   knowledge base, desk tools) via:

       @import "tailwindcss";
       @import "@pareo/tokens/theme.css";

   Contains ONLY tokens + a minimal base layer. App-specific animations,
   component classes and page chrome live in each app's own stylesheet.

   Theming model
   -------------
   Colors are stored as space-separated RGB channel triplets on :root and
   consumed as rgb(var(--x-rgb) / <alpha>). A single palette swap under
   [data-theme="light"] re-themes the whole app, because every semantic token
   and every alpha tint resolves through the same triplets. :root carries the
   dark values as the no-JS fallback; the consuming app stamps data-theme on
   <html> pre-paint.

   Fonts are declared as *values*, not @font-face loads — each app loads
   IBM Plex its own way (next/font in React, Fontsource in Svelte) and exposes
   the family through --font-ibm / --font-ibm-mono. The fallback strings keep
   these tokens valid even before the app wires a loader.
   ============================================================================= */

/* ---- Palette primitives: flip between dark (default) and light ------------- */
:root,
:root[data-theme="dark"] {
  --ink-rgb: 255 255 255;        /* text / foreground              */
  --bg-rgb: 10 10 18;            /* page background     (#0A0A12)  */
  --card-rgb: 22 22 42;          /* card surface        (#16162A)  */
  --surface-rgb: 19 19 31;       /* muted / inputs      (#13131F)  */
  --navy-rgb: 13 13 26;          /* deepest surface     (#0D0D1A)  */
  --brand-rgb: 123 92 245;       /* brand violet        (#7B5CF5)  */
  --brand-ink-rgb: 184 156 255;  /* readable brand text (#B89CFF)  */
  --brand-tint-ink-rgb: 184 156 255; /* ink on a brand tint  (#B89CFF)  */
  --brand-solid-rgb: 115 80 238; /* AA fill under white (#7350EE)  */
  --brand-hover-rgb: 109 78 224; /* brand pressed/hover (#6D4EE0)  */
  --primary-fg-rgb: 255 255 255; /* label on the primary fill      */
}

:root[data-theme="light"] {
  --ink-rgb: 20 23 45;           /* near-black ink      (#14172D)  */
  --bg-rgb: 251 251 254;         /* canvas              (#FBFBFE)  */
  --card-rgb: 255 255 255;       /* white surface       (#FFFFFF)  */
  --surface-rgb: 247 248 252;    /* surface-2           (#F7F8FC)  */
  --navy-rgb: 237 239 252;       /* soft indigo tint    (#EDEFFC)  */
  --brand-rgb: 123 92 245;       /* brand violet (kept vivid)      */
  --brand-ink-rgb: 108 71 179;   /* deep violet, AA on white (#6C47B3) */
  --brand-tint-ink-rgb: 91 60 150;   /* ink on a brand tint  (#5B3C96)  */
  --brand-solid-rgb: 115 80 238; /* AA fill under white (#7350EE)  */
  --brand-hover-rgb: 109 78 224; /* brand pressed/hover            */
  --primary-fg-rgb: 255 255 255; /* label on the primary fill      */
}

/* Pareo Pro: white on black, no colour but the status colours. The brand IS
   the ink, so every brand tint becomes a white tint and the primary fill is
   white under a black label. Stamped on <html> while the route is under /pro
   (platform ADR-0200). Same triplet set as dark and light, so a component
   that follows the tokens follows this theme without a change. */
:root[data-theme="pro"] {
  --ink-rgb: 255 255 255;
  --bg-rgb: 0 0 0;
  --card-rgb: 14 14 14;
  --surface-rgb: 10 10 10;
  --navy-rgb: 6 6 6;
  --brand-rgb: 255 255 255;
  --brand-ink-rgb: 255 255 255;
  --brand-tint-ink-rgb: 255 255 255;
  --brand-solid-rgb: 255 255 255;
  --brand-hover-rgb: 224 224 224;
  --primary-fg-rgb: 0 0 0;
}

/* Pareo Pro, light: black ink on white, no colour but the status colours. The
   brand is the ink, so every brand tint becomes a black tint and the primary
   fill is black under a white label. Same triplet set as pro, so a component
   that follows the tokens follows this theme without a change (platform
   ADR-0250). */
:root[data-theme="pro-light"] {
  --ink-rgb: 10 10 10;
  --bg-rgb: 250 250 250;
  --card-rgb: 255 255 255;
  --surface-rgb: 244 244 245;
  --navy-rgb: 244 244 245;
  --brand-rgb: 10 10 10;
  --brand-ink-rgb: 10 10 10;
  --brand-tint-ink-rgb: 10 10 10;
  --brand-solid-rgb: 10 10 10;
  --brand-hover-rgb: 40 40 40;
  --primary-fg-rgb: 255 255 255;
  /* Native chrome (form controls, scrollbars) follows color-scheme. */
  color-scheme: light;
}

/* ---- Chart palette: the single colour source for every chart, so a page drawn
   outside the app (a report page rendered in Python, with no access to the app
   CSS) reads the same colours as the app (docs/adr/0003).

   Series 1 is the brand violet in both themes, so a chart reads as one system
   with the rest of the app. Series 2 to 6 are darkened for light and brightened
   for dark; each clears 3:1 against its own theme surface, the WCAG threshold
   for a graphical object:

     series   light (on #FBFBFE)          dark (on #16162A)
     1        brand violet      4.33:1    brand violet      3.97:1
     2        hsl(190 90% 34%)  3.87:1    hsl(190 85% 55%)  9.36:1
     3        hsl(38 92% 40%)   3.18:1    hsl(38 92% 58%)   9.32:1
     4        hsl(142 72% 33%)  3.93:1    hsl(142 65% 52%)  9.13:1
     5        hsl(330 74% 45%)  5.23:1    hsl(330 80% 68%)  6.27:1
     6        hsl(217 88% 48%)  5.25:1    hsl(217 91% 65%)  5.84:1

   Status colours (--chart-success/warning/info/danger) carry the same
   readability correction as the app's status text: fixed status colours are
   correct as fills but too thin as body-weight strokes and labels on a light
   canvas, so light gets a darkened value and dark matches the fixed value. */
:root,
:root[data-theme="dark"] {
  --chart-1: rgb(var(--brand-rgb));
  --chart-2: hsl(190 85% 55%);
  --chart-3: hsl(38 92% 58%);
  --chart-4: hsl(142 65% 52%);
  --chart-5: hsl(330 80% 68%);
  --chart-6: hsl(217 91% 65%);
  --chart-success: hsl(142 70% 45%);
  --chart-warning: hsl(38 92% 50%);
  --chart-info: hsl(217 91% 65%);
  --chart-danger: hsl(0 84% 70%);
}

:root[data-theme="light"] {
  --chart-1: rgb(var(--brand-rgb));
  --chart-2: hsl(190 90% 34%);
  --chart-3: hsl(38 92% 40%);
  --chart-4: hsl(142 72% 33%);
  --chart-5: hsl(330 74% 45%);
  --chart-6: hsl(217 88% 48%);
  --chart-success: hsl(142 76% 29%);
  --chart-warning: hsl(38 92% 32%);
  --chart-info: hsl(217 91% 45%);
  --chart-danger: hsl(0 72% 38%);
}

/* Chart chrome: the grid line, the axis line, and a neutral series that is
   context rather than subject. Ink alpha, so it follows --ink-rgb and needs no
   per-theme copy. */
:root {
  --chart-grid: rgb(var(--ink-rgb) / 0.08);
  --chart-axis: rgb(var(--ink-rgb) / 0.45);
  --chart-neutral: rgb(var(--ink-rgb) / 0.1);
}

/* Pareo Pro chart blocks. Pro is monochrome plus status colours, so series 1 is
   the ink (white on pro, near black on pro-light), series 2 to 4 and 6 are the
   mockup's status hues, and series 5 is a mid ink tone, which keeps six series
   apart without a second brand colour. Values are the mockup's own
   (platform docs/plans/pareo-pro-redesign/mockup/base.css: --ok, --warn, --bad,
   --info, --gridline, --ink-faint, --idle). Chart chrome is set again here
   because the :root values are the product's. */
:root[data-theme="pro"] {
  --chart-1: rgb(var(--ink-rgb));
  --chart-2: hsl(217 91% 66%);
  --chart-3: hsl(38 92% 55%);
  --chart-4: hsl(142 70% 45%);
  --chart-5: rgb(var(--ink-rgb) / 0.55);
  --chart-6: hsl(0 84% 68%);
  --chart-success: hsl(142 70% 45%);
  --chart-warning: hsl(38 92% 55%);
  --chart-info: hsl(217 91% 66%);
  --chart-danger: hsl(0 84% 68%);
  --chart-grid: rgb(var(--ink-rgb) / 0.06);
  --chart-axis: rgb(var(--ink-rgb) / 0.45);
  --chart-neutral: rgb(var(--ink-rgb) / 0.16);
}

:root[data-theme="pro-light"] {
  --chart-1: rgb(var(--ink-rgb));
  --chart-2: hsl(217 88% 46%);
  --chart-3: hsl(32 92% 36%);
  --chart-4: hsl(142 76% 29%);
  --chart-5: rgb(var(--ink-rgb) / 0.5);
  --chart-6: hsl(0 72% 42%);
  --chart-success: hsl(142 76% 29%);
  --chart-warning: hsl(32 92% 36%);
  --chart-info: hsl(217 88% 46%);
  --chart-danger: hsl(0 72% 42%);
  --chart-grid: rgb(var(--ink-rgb) / 0.08);
  --chart-axis: rgb(var(--ink-rgb) / 0.48);
  --chart-neutral: rgb(var(--ink-rgb) / 0.16);
}

/* ---- Status text: a status colour that can carry words (docs/adr/0004).

   --color-success / --color-warning / --color-info / --color-destructive are
   correct as fills and too thin as text on a light canvas, so each theme sets
   its own text value. Every one clears 4.5:1 on its own theme's background and
   card (asserted in test/). Dark and light are the chart status values, pro and
   pro-light the Pro mockup's, so a status reads the same in a chart and in a
   label. `danger` is the text sibling --color-destructive never had. */
:root,
:root[data-theme="dark"] {
  --success-text: hsl(142 70% 45%);
  --warning-text: hsl(38 92% 50%);
  --info-text: hsl(217 91% 65%);
  --danger-text: hsl(0 84% 70%);
}

:root[data-theme="light"] {
  --success-text: hsl(142 76% 29%);
  --warning-text: hsl(38 92% 32%);
  --info-text: hsl(217 91% 45%);
  --danger-text: hsl(0 72% 38%);
}

:root[data-theme="pro"] {
  --success-text: hsl(142 70% 45%);
  --warning-text: hsl(38 92% 55%);
  --info-text: hsl(217 91% 66%);
  --danger-text: hsl(0 84% 68%);
}

:root[data-theme="pro-light"] {
  --success-text: hsl(142 76% 29%);
  --warning-text: hsl(32 92% 34%); /* the mockup's 36% is 4.41:1 on the canvas */
  --info-text: hsl(217 88% 46%);
  --danger-text: hsl(0 72% 42%);
}

/* ---- Motion: one ease and four durations for every surface (docs/adr/0004).
   The same in every theme. A consumer switches motion off under
   prefers-reduced-motion; that is behaviour, so it stays in the app. */
:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-exit: 100ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;
}

@theme {
  /* ---- Type: IBM Plex everywhere. Apps expose the loaded family through
     --font-ibm / --font-ibm-mono; the fallback keeps these valid pre-load. -- */
  --font-sans: var(--font-ibm, "IBM Plex Sans"), system-ui, sans-serif;
  --font-display: var(--font-ibm, "IBM Plex Sans"), system-ui, sans-serif;
  --font-mono: var(--font-ibm-mono, "IBM Plex Mono"), ui-monospace, monospace;

  /* ---- Type scale (docs/adr/0004). Tailwind's own steps stay as they are:
     xs 12, sm 14, base 16, lg 18, xl 20, 2xl 24, 3xl 30, 4xl 36, each with its
     line height. The dense steps below fill the gaps a data-dense UI needs and
     set the size only: the line height comes from a leading-* utility or the
     parent, the same as the arbitrary text-[13px] they replace. The scale is
     closed: a size that is not here is added here, never written as text-[Npx]. */
  --text-9: 9px;   /* mono micro label, count dot      */
  --text-10: 10px; /* mono caption, eyebrow            */
  --text-11: 11px; /* meta line, chip                  */
  --text-13: 13px; /* dense body, the app's base text  */
  --text-15: 15px; /* reading text in a conversation   */
  --text-17: 17px; /* document title                   */
  --text-22: 22px; /* section headline                 */
  --text-28: 28px; /* display figure, page headline    */

  /* ---- Motion as Tailwind defaults: a bare transition-* takes the brand
     motion, so a caller never types a duration or a curve. */
  --default-transition-duration: var(--dur-fast);
  --default-transition-timing-function: var(--ease);

  /* ---- Semantic color tokens (shadcn vocabulary) — all flip with the theme -- */
  --color-background: rgb(var(--bg-rgb));
  --color-foreground: rgb(var(--ink-rgb));
  --color-card: rgb(var(--card-rgb));
  --color-card-foreground: rgb(var(--ink-rgb));
  --color-popover: rgb(var(--card-rgb));
  --color-popover-foreground: rgb(var(--ink-rgb));
  /* The fill under a white label, not the brand swatch. White on --brand-rgb is
     4.47:1, just under AA-normal, and every shipped brand-fill label is 12-16px
     semibold, which is not WCAG "large text" (24px, or 18.66px bold). So the
     pairing needs 4.5:1 and --brand-rgb cannot carry it. --brand-solid-rgb is one
     step deeper (5.11:1) and stays the same violet to the eye. --brand-rgb keeps
     its pinned value for swatches, borders, icons and large display text. */
  --color-primary: rgb(var(--brand-solid-rgb));
  --color-primary-foreground: rgb(var(--primary-fg-rgb));
  --color-primary-light: rgb(var(--brand-ink-rgb));
  /* Brand ink for text and icons that sit on a brand tint, not on the canvas.
     --color-primary-light stays the brand text color on neutral surfaces. The
     console rail is a translucent navy over a brand-tinted canvas, so a brand
     tint inside it composites over a darker surface than a card; there, a
     brand tint and a mid-violet ink converge and lose contrast. The light
     value is deeper to compensate, calibrated to clear 4.5:1 on brand tints
     up to 0.32 alpha. */
  --color-primary-on-tint: rgb(var(--brand-tint-ink-rgb));
  --color-primary-hover: rgb(var(--brand-hover-rgb));
  --color-secondary: rgb(var(--navy-rgb));
  --color-secondary-foreground: rgb(var(--ink-rgb));
  --color-muted: rgb(var(--surface-rgb));
  --color-muted-foreground: rgb(var(--ink-rgb) / 0.6);
  --color-accent: rgb(var(--surface-rgb));
  --color-accent-foreground: rgb(var(--ink-rgb));
  --color-destructive: hsl(0 62.8% 50%);
  --color-destructive-foreground: #ffffff;
  --color-border: rgb(var(--brand-rgb) / 0.15);
  --color-input: rgb(var(--surface-rgb));
  --color-ring: rgb(var(--brand-rgb));

  /* ---- Three-step text hierarchy (replaces ad-hoc inline white/ink alphas) -- */
  --color-ink: rgb(var(--ink-rgb));
  --color-ink-soft: rgb(var(--ink-rgb) / 0.65);
  /* 0.5 (not 0.45) so faint text clears the 3:1 UI threshold in the light theme,
     where alpha composites over a near-white canvas. See docs/adr/0001. */
  --color-ink-faint: rgb(var(--ink-rgb) / 0.5);

  /* ---- Fixed status colors (identical in both themes) ---------------------- */
  --color-success: hsl(142 70% 45%);
  --color-warning: hsl(38 92% 50%);
  --color-info: hsl(217 91% 65%);

  /* ---- Status text, per theme (see the status text block above) ----------- */
  --color-success-text: var(--success-text);
  --color-warning-text: var(--warning-text);
  --color-info-text: var(--info-text);
  --color-danger-text: var(--danger-text);

  /* ---- Brand aliases (legacy .bg-pareo-*, .text-purple call sites) ---------- */
  --color-navy: rgb(var(--navy-rgb));
  --color-surface: rgb(var(--surface-rgb));
  --color-deep-card: rgb(var(--card-rgb));
  --color-purple: rgb(var(--brand-rgb));
  --color-purple-dim: rgb(var(--brand-rgb) / 0.12);

  /* ---- Base radius scale (Tailwind rounded-sm/md/lg utilities) -------------- */
  --radius-sm: calc(0.5rem - 4px); /* 4px  */
  --radius-md: calc(0.5rem - 2px); /* 6px  */
  --radius-lg: 0.5rem;             /* 8px  */

  /* ---- Semantic component radii (referenced by shared components) ----------- */
  --radius-field: 8px;
  --radius-button: 10px;
  --radius-card: 14px;
  --radius-panel: 18px;
  --radius-pill: 999px;
}

/* ---- Canonical base layer — consistent across every Pareo surface --------- */
@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
  }

  mark {
    background-color: rgb(var(--brand-rgb) / 0.25);
    border-radius: 2px;
    padding: 0 2px;
    font-weight: 600;
    color: rgb(var(--brand-ink-rgb));
  }

  ::selection {
    background-color: rgb(var(--brand-rgb) / 0.35);
    color: rgb(var(--ink-rgb));
  }
}