/* CONNECT_APPS_TOKENS_V1 (2026-10-16) - the palette and scale of the seven app pages.

   Loaded after the Connect theme (/static/src/site/connect-theme.css) and only by
   /apps and /apps/<product>, so it re-points the theme's own token names for these
   pages and nothing else: the site, /app and the documentation keep theirs.

   Charcoal and neutral surfaces; copper (the Connect brand) only as the accent - the
   current page, the focus ring, emphasis - never as decoration; no blue. Status colours
   carry meaning and always appear with their words. Every text pair here is >= 4.5:1
   (WCAG 2.2 AA) on the surface it is used on; tools/test_product_apps_v1.py measures it.
   app.css takes colour only from these names. */

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

  --cx-text: #17181A;
  --cx-text-2: #44464A;
  --cx-text-3: #5D6065;
  --cx-text-disabled: #9A9C9F;

  --cx-border-soft: #ECECE8;
  --cx-border: #E1E1DC;
  --cx-border-strong: #CBCBC5;

  --cx-action: #1B1C1F;
  --cx-action-hover: #2E3034;
  --cx-action-ink: #FFFFFF;
  --cx-action-soft: #ECECE8;

  --cx-link: #8A5220;
  --cx-link-hover: #6B3E16;
  --cx-focus: #B8692C;

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

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

  --cx-font: "Inter", "Segoe UI Variable Text", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --cx-text-page: 26px;
  --cx-text-section: 16px;
  --cx-text-body: 14px;
  --cx-text-small: 13px;
  --cx-text-meta: 12.5px;
  --cx-radius-sm: 7px;
  --cx-radius: 10px;
  --cx-radius-lg: 14px;

  /* The app's own scale (app.css reads these). */
  --pa-accent: #B8692C;
  --pa-accent-soft: #F6EDE4;
  --pa-accent-text: #8A5220;
  --pa-mark: #1B1C1F;
  --pa-mark-ink: #F3D9C2;
  --pa-chart-1: #1B1C1F;
  --pa-chart-2: #8A8D92;
  --pa-chart-3: #B8692C;
}

:root[data-theme="dark"] {
  --cx-canvas: #0E0F10;
  --cx-surface: #16171A;
  --cx-surface-2: #1D1F22;
  --cx-hover: #222429;
  --cx-selected: #2A2C31;
  --cx-rail: #121315;
  --cx-input: #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-link: #E6AB78;
  --cx-link-hover: #F2C59D;
  --cx-focus: #D88A4B;

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

  --pa-accent: #D88A4B;
  --pa-accent-soft: rgba(216, 138, 75, .14);
  --pa-accent-text: #E6AB78;
  --pa-mark: #EDEDEA;
  --pa-mark-ink: #8A5220;
  --pa-chart-1: #EDEDEA;
  --pa-chart-2: #6E7177;
  --pa-chart-3: #D88A4B;
}