/*
 * Console design tokens: one set of names (--cf-*), four looks.
 *
 * Brand is set by the server as a class on <html>: "ctrlf5" (default) or "data-sync".
 * Mode is the user's choice (.light / .dark); until they choose, it follows the device.
 * Components use only these tokens, never raw colours, so they work in every look.
 * Every text, outline and focus pairing below meets WCAG 2.2 AA in all four looks.
 */

/*
 * The font's own ascent/descent place its letters above the middle of the line (capitals ~2 px, lowercase ~1 px),
 * so labels in buttons and fields looked high. The overrides move the letters down by about 0.06 em, centring the
 * band between x-height and cap height; ascent + descent stay the same, so no line height changes.
 * Chrome, Edge and Firefox apply them; Safari ignores them and keeps the font's own placement.
 */
@font-face { font-family: GHEAHelveticaGeo; src: url(../fonts/GHEAHelveticaGeo-Regular.ttf); font-weight: 400; ascent-override: 78.9%; descent-override: 20.1%; }
@font-face { font-family: GHEAHelveticaGeo; src: url(../fonts/GHEAHelveticaGeo-DemiBold.ttf); font-weight: 600; ascent-override: 78.88%; descent-override: 20.22%; }
@font-face { font-family: GHEAHelveticaGeo; src: url(../fonts/GHEAHelveticaGeo-Bold.ttf); font-weight: 700; ascent-override: 78.85%; descent-override: 20.25%; }

/* Shape and type. Brands may override any of these (fonts, corners, sizes). */
:root {
  --cf-font-sans: GHEAHelveticaGeo, "Helvetica Neue", Arial, sans-serif;
  --cf-font-size-sm: 12px;
  --cf-font-size: 14px;
  --cf-font-size-lg: 16px;
  --cf-font-weight: 400;
  --cf-font-weight-semibold: 600;
  --cf-font-weight-bold: 700;
  /* Labels made only of capitals or digits (counters, all-caps pills): the corrected font centres the band between
     x-height and cap height, which leaves capitals 0.05 em above the middle, so those labels move down by it.
     Browsers place text on whole pixels and drop smaller shifts, hence the rounding (1px at usual sizes). */
  --cf-caps-offset: round(0.05em, 1px);
  --cf-radius-sm: 6px;
  --cf-radius: 8px;
  --cf-radius-lg: 12px;
  --cf-radius-pill: 999px;
  --cf-control-height-sm: 32px;
  --cf-control-height: 40px;
  --cf-control-height-lg: 48px;
  --cf-focus-ring-width: 2px;
  --cf-focus-ring-offset: 2px;
  --cf-disabled-opacity: .55;
  --cf-transition: .15s ease-in-out;

  /* Status fills, the same for both brands and modes (text on them: on-primary, or on-warning) */
  --cf-info: #0078CA;
  --cf-info-hover: #006EB9;
  --cf-warning: #F2994A;
  --cf-on-warning: #02182B;
  --cf-shadow-overlay: 0 8px 24px rgb(0 0 0 / .28);

  /* Badge fills: pale, the same for both brands and modes, always with dark text */
  --cf-badge-success: #5FD97A;
  --cf-badge-danger: #E3635F;
  --cf-badge-warning: #F5B042;
  --cf-badge-info: #B6CBFC;
  --cf-badge-neutral: #DDE1E6;
  --cf-on-badge: #02182B;
}

/* CF5 light: the fallback when the server sends no brand and the user has no mode yet */
:root {
  --cf-body-bg: #F2F2F2;
  --cf-body-color: #434E5B;
  --cf-heading-color: #2E353E;
  --cf-muted-color: #616B7E;
  --cf-surface: #FFFFFF;
  --cf-surface-2: #E9ECEF;
  --cf-border-color: #D5DADF;
  --cf-input-bg: #FFFFFF;
  --cf-input-border: #838C9F;
  --cf-primary: #1E8756;
  --cf-primary-hover: #1B7A4E;
  --cf-primary-active: #186D46;
  --cf-on-primary: #FFFFFF;
  --cf-primary-text: #1B794D;
  --cf-primary-subtle: #E5F5ED;
  --cf-secondary: #E9ECEF;
  --cf-secondary-hover: #D6DADD;
  --cf-on-secondary: #2E353E;
  --cf-success: #1E8756;
  --cf-success-hover: #1B7A4E;
  --cf-success-text: #1B794D;
  --cf-danger: #DA3630;
  --cf-danger-hover: #C92A24;
  --cf-danger-text: #C82923;
  --cf-danger-subtle: #FAE3E3;
  --cf-warning-text: #945E07;
  --cf-info-text: #006DB7;
  --cf-focus-ring: #1B794D;
  --cf-link-color: #1B794D;
  color-scheme: light;
}

/* CF5 dark */
:root.dark {
  --cf-body-bg: #2E353E;
  --cf-body-color: #D3D8DE;
  --cf-heading-color: #FFFFFF;
  --cf-muted-color: #A9B0BC;
  --cf-surface: #343C46;
  --cf-surface-2: #3B4450;
  --cf-border-color: #434E5B;
  --cf-input-bg: #2E353E;
  --cf-input-border: #8C95A6;
  --cf-primary: #1E8756;
  --cf-primary-hover: #1B7A4E;
  --cf-primary-active: #186D46;
  --cf-on-primary: #FFFFFF;
  --cf-primary-text: #2FD085;
  --cf-primary-subtle: #324D4C;
  --cf-secondary: #3B4450;
  --cf-secondary-hover: #4F5762;
  --cf-on-secondary: #FFFFFF;
  --cf-success: #1E8756;
  --cf-success-hover: #1B7A4E;
  --cf-success-text: #2DC77F;
  --cf-danger: #DA3630;
  --cf-danger-hover: #C92A24;
  --cf-danger-text: #EC9A97;
  --cf-danger-subtle: #4B3C43;
  --cf-warning-text: #F5A524;
  --cf-info-text: #4FB8FF;
  --cf-focus-ring: #2FD085;
  --cf-link-color: #2FD085;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    --cf-body-bg: #2E353E;
    --cf-body-color: #D3D8DE;
    --cf-heading-color: #FFFFFF;
    --cf-muted-color: #A9B0BC;
    --cf-surface: #343C46;
    --cf-surface-2: #3B4450;
    --cf-border-color: #434E5B;
    --cf-input-bg: #2E353E;
    --cf-input-border: #8C95A6;
    --cf-primary: #1E8756;
    --cf-primary-hover: #1B7A4E;
    --cf-primary-active: #186D46;
    --cf-on-primary: #FFFFFF;
    --cf-primary-text: #2FD085;
    --cf-primary-subtle: #324D4C;
    --cf-secondary: #3B4450;
    --cf-secondary-hover: #4F5762;
    --cf-on-secondary: #FFFFFF;
    --cf-success: #1E8756;
    --cf-success-hover: #1B7A4E;
    --cf-success-text: #2DC77F;
    --cf-danger: #DA3630;
    --cf-danger-hover: #C92A24;
    --cf-danger-text: #EC9A97;
    --cf-danger-subtle: #4B3C43;
    --cf-warning-text: #F5A524;
    --cf-info-text: #4FB8FF;
    --cf-focus-ring: #2FD085;
    --cf-link-color: #2FD085;
    color-scheme: dark;
  }
}

/* DataSync light (brand shape and type overrides go in this block too) */
:root.data-sync {
  --cf-body-bg: #F2F2F2;
  --cf-body-color: #02182B;
  --cf-heading-color: #02182B;
  --cf-muted-color: #616B7E;
  --cf-surface: #FFFFFF;
  --cf-surface-2: #E7EDF5;
  --cf-border-color: #D4D4D4;
  --cf-input-bg: #FFFFFF;
  --cf-input-border: #838C9F;
  --cf-primary: #0550FF;
  --cf-primary-hover: #0046E8;
  --cf-primary-active: #003ECD;
  --cf-on-primary: #FFFFFF;
  --cf-primary-text: #0550FF;
  --cf-primary-subtle: #E1EAFF;
  --cf-secondary: #E7EDF5;
  --cf-secondary-hover: #D0D8E1;
  --cf-on-secondary: #02182B;
  --cf-success: #1E8756;
  --cf-success-hover: #1B7A4E;
  --cf-success-text: #1B794D;
  --cf-danger: #DA3630;
  --cf-danger-hover: #C92A24;
  --cf-danger-text: #C82923;
  --cf-danger-subtle: #FAE3E3;
  --cf-warning-text: #945E07;
  --cf-info-text: #006DB7;
  --cf-focus-ring: #0550FF;
  --cf-link-color: #0550FF;
  color-scheme: light;
}

/* DataSync dark */
:root.data-sync.dark {
  --cf-body-bg: #062841;
  --cf-body-color: #D6E2EE;
  --cf-heading-color: #FFFFFF;
  --cf-muted-color: #8F98A8;
  --cf-surface: #06253D;
  --cf-surface-2: #0C3350;
  --cf-border-color: #0B3E69;
  --cf-input-bg: #06253D;
  --cf-input-border: #8C95A6;
  --cf-primary: #0550FF;
  --cf-primary-hover: #0046E8;
  --cf-primary-active: #003ECD;
  --cf-on-primary: #FFFFFF;
  --cf-primary-text: #6694FF;
  --cf-primary-subtle: #062C5C;
  --cf-secondary: #0C3350;
  --cf-secondary-hover: #244762;
  --cf-on-secondary: #FFFFFF;
  --cf-success: #1E8756;
  --cf-success-hover: #1B7A4E;
  --cf-success-text: #27AD6F;
  --cf-danger: #DA3630;
  --cf-danger-hover: #C92A24;
  --cf-danger-text: #E67773;
  --cf-danger-subtle: #24283C;
  --cf-warning-text: #F5A524;
  --cf-info-text: #0C9DFF;
  --cf-focus-ring: #6694FF;
  --cf-link-color: #6694FF;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root.data-sync:not(.light):not(.dark) {
    --cf-body-bg: #062841;
    --cf-body-color: #D6E2EE;
    --cf-heading-color: #FFFFFF;
    --cf-muted-color: #8F98A8;
    --cf-surface: #06253D;
    --cf-surface-2: #0C3350;
    --cf-border-color: #0B3E69;
    --cf-input-bg: #06253D;
    --cf-input-border: #8C95A6;
    --cf-primary: #0550FF;
    --cf-primary-hover: #0046E8;
    --cf-primary-active: #003ECD;
    --cf-on-primary: #FFFFFF;
    --cf-primary-text: #6694FF;
    --cf-primary-subtle: #062C5C;
    --cf-secondary: #0C3350;
    --cf-secondary-hover: #244762;
    --cf-on-secondary: #FFFFFF;
    --cf-success: #1E8756;
    --cf-success-hover: #1B7A4E;
    --cf-success-text: #27AD6F;
    --cf-danger: #DA3630;
    --cf-danger-hover: #C92A24;
    --cf-danger-text: #E67773;
    --cf-danger-subtle: #24283C;
    --cf-warning-text: #F5A524;
    --cf-info-text: #0C9DFF;
    --cf-focus-ring: #6694FF;
    --cf-link-color: #6694FF;
    color-scheme: dark;
  }
}

/* Sidebar (components/sidebar.css): dark in both modes, so these follow the brand only.
   Text and the current-page bar meet AA on every background they sit on. */
:root {
  --cf-sidebar-bg: #38414C;
  --cf-sidebar-hover-bg: #333B45;
  --cf-sidebar-current-bg: #2E353E;
  --cf-sidebar-flyout-bg: #2E353E;
  --cf-sidebar-color: #A9B0BC;
  --cf-sidebar-strong: #FFFFFF;
  --cf-sidebar-accent: #2FD085;
  --cf-sidebar-line: rgb(255 255 255 / .1);
  --cf-sidebar-shadow: 0 8px 24px rgb(0 0 0 / .32);
}
:root.data-sync {
  --cf-sidebar-bg: #02182B;
  --cf-sidebar-hover-bg: #041F37;
  --cf-sidebar-current-bg: #062841;
  --cf-sidebar-flyout-bg: #062841;
  --cf-sidebar-accent: #6694FF;
}