/* Connect theme — the one design system every page on this origin reads.

   One palette for the whole origin (2026-10-17): the /apps palette — neutral
   paper and charcoal in Day, neutral graphite in Dark, a charcoal (Day) or
   near-white (Dark) primary action with its own ink, copper only as the accent
   (current page, focus, emphasis). Each surface keeps its own token names and
   points them here, so a colour changes in one place:

     landing + site pages  landing/colour-unification.css
     the application       src/styles/61-colour-unification.css
     the product apps      apps/shared/tokens.css (scale and --pa-* only)
     documentation         docs/docs.css
     the assistant         landing/agent.css
     privacy, terms, trust privacy/privacy.css, terms/terms.css

   The theme itself is chosen by src/site/connect-theme.js (data-theme on <html>).
   Values, plus one thing every page shares: the backdrop at the end of this
   file (the /apps hub's layered gradient), drawn behind every page on the origin. */

:root {
  /* Surfaces */
  --cx-canvas: #F6F6F4;
  --cx-shell: #F1F1EE;
  --cx-surface: #FFFFFF;
  --cx-surface-2: #F1F1EE;
  --cx-hover: #EEEEEA;
  --cx-selected: #E8E7E2;
  --cx-input: #FFFFFF;
  --cx-rail: #FBFBFA;
  --cx-overlay: rgba(20, 21, 23, .42);

  /* Text: every tone clears 4.5:1 on every surface it sits on, down to
     --cx-selected (tools/test_ui_color_contrast_v1.py measures it). */
  --cx-text: #17181A;
  --cx-text-2: #44464A;
  --cx-text-3: #5D6065;
  --cx-text-disabled: #9A9C9F;

  /* Lines */
  --cx-border-soft: #ECECE8;
  --cx-border: #E1E1DC;
  --cx-border-strong: #CBCBC5;

  /* The primary action: charcoal ink in Day, near-white in Dark; its label is --cx-action-ink. */
  --cx-action: #1B1C1F;
  --cx-action-hover: #2E3034;
  --cx-action-ink: #FFFFFF;
  --cx-action-soft: #ECECE8;

  /* Emphasis: links, eyebrows, a figure that matters. Copper as text is the
     --cx-link shade; the fill tone is for marks, rules and focus. */
  --cx-accent: #B8692C;
  --cx-accent-soft: #F6EDE4;
  --cx-link: #8A5220;
  --cx-link-hover: #6B3E16;
  --cx-focus: #B8692C;
  --cx-accent-on-action: #E6AB78;   /* copper as text on an --cx-action fill */

  /* Meaning: fill, soft surface, and the shade text is read at. */
  --cx-success: #0F7B6C;
  --cx-success-soft: #E5F3EF;
  --cx-success-text: #0B6155;
  --cx-warning: #9A5A0E;
  --cx-warning-soft: #FBF0E0;
  --cx-warning-text: #82490A;
  --cx-danger: #B42318;
  --cx-danger-soft: #FCECEA;
  --cx-danger-text: #9E1E14;
  --cx-info: #4B5764;
  --cx-info-soft: #EEF0F2;
  --cx-info-text: #3D4752;

  /* Elevation */
  --cx-shadow-1: 0 1px 2px rgba(20, 21, 23, .05);
  --cx-shadow-2: 0 1px 2px rgba(20, 21, 23, .04), 0 8px 24px rgba(20, 21, 23, .07);
  --cx-shadow-3: 0 2px 8px rgba(20, 21, 23, .06), 0 24px 64px rgba(20, 21, 23, .16);
  /* Four restrained tones (the Owner's polish order, 2026-10-24): identity and emphasis only - a department's
     hue, a selected plan's wash, a pictogram - never body text and never a second action colour. Each -ink
     reads 4.5:1 on its -soft wash and on the surface. Elevation 1 and 2 for cards that lift on hover. */
  --cx-tone-blue: #2F6FDB; --cx-tone-blue-soft: #EAF1FD; --cx-tone-blue-ink: #1D4FA8;
  --cx-tone-teal: #0F8A7E; --cx-tone-teal-soft: #E4F4F1; --cx-tone-teal-ink: #0B6158;
  --cx-tone-amber: #B7791F; --cx-tone-amber-soft: #FBF1DF; --cx-tone-amber-ink: #8A5A12;
  --cx-tone-violet: #7357D6; --cx-tone-violet-soft: #EFEBFC; --cx-tone-violet-ink: #563BB5;
  --cx-elev-1: 0 1px 2px 0 rgba(17, 24, 39, .06);
  --cx-elev-2: 0 8px 22px -12px rgba(17, 24, 39, .22);
  --cx-chrome: #F6F6F4;   /* browser theme-color */

  /* Type */
  --cx-font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui,
             -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cx-font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --cx-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  --cx-text-page: 30px;
  --cx-text-section: 19px;
  --cx-text-body: 15px;
  --cx-text-meta: 13px;
  --cx-leading: 1.6;
  --cx-weight-strong: 650;

  /* Space, shape, motion */
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 24px;
  --cx-space-6: 32px;
  --cx-space-7: 40px;
  --cx-radius-sm: 8px;
  --cx-radius: 12px;
  --cx-radius-lg: 16px;
  --cx-radius-pill: 999px;
  --cx-control: 44px;
  --cx-ease: cubic-bezier(.2, .8, .2, 1);
  --cx-fast: 160ms;
}

:root[data-theme="dark"] {
  --cx-canvas: #0E0F10;
  --cx-shell: #121315;
  --cx-surface: #16171A;
  --cx-surface-2: #1D1F22;
  --cx-hover: #222429;
  --cx-selected: #2A2C31;
  --cx-input: #121315;
  --cx-rail: #121315;
  --cx-overlay: rgba(0, 0, 0, .6);

  --cx-text: #F3F3F1;
  --cx-text-2: #BCBEC2;
  --cx-text-3: #9DA0A6;
  --cx-text-disabled: #5E6166;

  --cx-border-soft: #212327;
  --cx-border: #2A2C31;
  --cx-border-strong: #3B3E44;

  --cx-action: #EDEDEA;
  --cx-action-hover: #FFFFFF;
  --cx-action-ink: #121315;
  --cx-action-soft: #26282D;

  --cx-accent: #D88A4B;
  --cx-accent-soft: rgba(216, 138, 75, .14);
  --cx-link: #E6AB78;
  --cx-link-hover: #F2C59D;
  --cx-focus: #D88A4B;
  --cx-accent-on-action: #8A5220;

  --cx-success: #34B99B;
  --cx-success-soft: rgba(52, 185, 155, .14);
  --cx-success-text: #63D2B9;
  --cx-warning: #E2A23C;
  --cx-warning-soft: rgba(226, 162, 60, .14);
  --cx-warning-text: #F0BE6C;
  --cx-danger: #EF6B5F;
  --cx-danger-soft: rgba(239, 107, 95, .14);
  --cx-danger-text: #F6948B;
  --cx-info: #9AA6B2;
  --cx-info-soft: rgba(154, 166, 178, .14);
  --cx-info-text: #BAC4CE;

  --cx-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --cx-shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .38);
  --cx-shadow-3: 0 2px 8px rgba(0, 0, 0, .45), 0 24px 64px rgba(0, 0, 0, .6);
  --cx-tone-blue: #7FA8F5; --cx-tone-blue-soft: #1A2537; --cx-tone-blue-ink: #A9C4F8;
  --cx-tone-teal: #4CC2B4; --cx-tone-teal-soft: #142C29; --cx-tone-teal-ink: #8ADBD0;
  --cx-tone-amber: #E3A954; --cx-tone-amber-soft: #2E2416; --cx-tone-amber-ink: #F0C786;
  --cx-tone-violet: #A895F2; --cx-tone-violet-soft: #241F38; --cx-tone-violet-ink: #C7BAF7;
  --cx-elev-1: 0 1px 2px 0 rgba(0, 0, 0, .4);
  --cx-elev-2: 0 10px 26px -12px rgba(0, 0, 0, .6);
  --cx-chrome: #0E0F10;
}

/* ---- the backdrop: the plain canvas, for the whole origin ----------------------------------
   One calm surface behind every page, in Day and Dark: the canvas colour itself, nothing drawn on it.
   The radial washes (blue, violet, green) and the grid that stood here from 2026-10-17 were decoration,
   which CRM-PLUS-GLOBAL-CONTRACT.md section 3 and request section 6 rule out (no decorative glows or
   washes; main's decision, 2026-10-23). Every page's body is transparent over the root, so this is the
   one place the page colour comes from; cards and panels keep their own surfaces. */
@media screen {
  html[data-theme] { background-color: var(--cx-canvas); }
  /*  Every surface's own body rule (the app's is html[data-theme] body, !important)
      is one step less specific than this, so the canvas shows on every page. */
  html[data-theme] > body,
  html[data-theme] > body.connect-site { background: transparent !important; }
  html[data-theme] > body::before { background: none !important; }
}