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

   Day is the landing page's palette (warm paper, ink actions, copper emphasis);
   Dark is the application's (graphite surfaces, blue actions). 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, 85-connect-theme.css
     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 only: no selectors beyond the two theme roots, nothing to override. */

:root {
  /* Surfaces */
  --cx-canvas: #F5F0E8;
  --cx-shell: #ECE2D4;
  --cx-surface: #FFFDF8;
  --cx-surface-2: #F2E9DC;
  --cx-hover: #F0E7DA;
  --cx-selected: #EADFCE;
  --cx-input: #FFFDF8;
  --cx-rail: #F1E9DD;
  --cx-overlay: rgba(23, 27, 30, .42);

  /* Text: 15.6, 9.0 and 5.3:1 on the canvas; the muted tone still clears
     4.5:1 on --cx-selected, the darkest surface it sits on. */
  --cx-text: #171B1E;
  --cx-text-2: #45423D;
  --cx-text-3: #5C5953;
  --cx-text-disabled: #9A948B;

  /* Lines */
  --cx-border-soft: #E6DDD0;
  --cx-border: #DCD5CC;
  --cx-border-strong: #C8C0B5;

  /* The primary action: the landing page's ink button. */
  --cx-action: #171D22;
  --cx-action-hover: #2B333A;
  --cx-action-ink: #FFF8ED;
  --cx-action-soft: #EAE3D8;

  /* Emphasis: links, eyebrows, a figure that matters. Copper as text is the
     5.2:1 shade; the fill tone is for marks, rules and focus. */
  --cx-accent: #B9732D;
  --cx-accent-soft: #F6E6D2;
  --cx-link: #8D551E;
  --cx-link-hover: #6E4115;
  --cx-focus: #B9732D;

  /* Meaning: fill, soft surface, and the shade text is read at. */
  --cx-success: #1A7E70;
  --cx-success-soft: #E4F3EE;
  --cx-success-text: #14665B;
  --cx-warning: #9A5A0E;
  --cx-warning-soft: #FBEEDB;
  --cx-warning-text: #8A4B00;
  --cx-danger: #B42318;
  --cx-danger-soft: #FCEBE8;
  --cx-danger-text: #A21F15;
  --cx-info: #315E75;
  --cx-info-soft: #E6EEF2;
  --cx-info-text: #2B5468;

  /* Elevation */
  --cx-shadow-1: 0 1px 2px rgba(52, 39, 24, .06);
  --cx-shadow-2: 0 1px 2px rgba(52, 39, 24, .05), 0 6px 18px rgba(52, 39, 24, .07);
  --cx-shadow-3: 0 2px 8px rgba(52, 39, 24, .07), 0 18px 48px rgba(52, 39, 24, .12);
  --cx-chrome: #F5F0E8;   /* 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: #0D0D0D;
  --cx-shell: #141414;
  --cx-surface: #1E1E1E;
  --cx-surface-2: #242424;
  --cx-hover: #282828;
  --cx-selected: #303030;
  --cx-input: #212121;
  --cx-rail: #171717;
  --cx-overlay: rgba(0, 0, 0, .62);

  --cx-text: #FFFFFF;
  --cx-text-2: #B4B4B4;
  --cx-text-3: #999999;
  --cx-text-disabled: #525252;

  --cx-border-soft: #262626;
  --cx-border: #2E2E2E;
  --cx-border-strong: #383838;

  --cx-action: #2F76D2;
  --cx-action-hover: #2563EB;
  --cx-action-ink: #FFFFFF;
  --cx-action-soft: rgba(47, 118, 210, .16);

  --cx-accent: #2F76D2;
  --cx-accent-soft: rgba(47, 118, 210, .16);
  --cx-link: #5294E2;
  --cx-link-hover: #7CB3F3;
  --cx-focus: #2F76D2;

  --cx-success: #10A37F;
  --cx-success-soft: rgba(16, 163, 127, .14);
  --cx-success-text: #3DC9A4;
  --cx-warning: #F59E0B;
  --cx-warning-soft: rgba(245, 158, 11, .13);
  --cx-warning-text: #F5B544;
  --cx-danger: #EF4444;
  --cx-danger-soft: rgba(239, 68, 68, .14);
  --cx-danger-text: #F87171;
  --cx-info: #2F76D2;
  --cx-info-soft: rgba(47, 118, 210, .16);
  --cx-info-text: #6AA5EA;

  --cx-shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --cx-shadow-2: 0 1px 2px rgba(0, 0, 0, .40), 0 6px 18px rgba(0, 0, 0, .35);
  --cx-shadow-3: 0 2px 8px rgba(0, 0, 0, .45), 0 18px 48px rgba(0, 0, 0, .55);
  --cx-chrome: #0D0D0D;
}