/* ACI brand colours. NOT a Design export: derived from the previous src/variables.css and the former src/lib/theme/tokens.ts (its remaining numbers are now written inside createAppTheme in theme.ts).
   [E] exact in those files   [I] role inferred from the JCT file's structure   [?] no source: guess.
   Replace with Design's ACI file when it arrives. */
/* Font: Raleway comes from Google Fonts, a trusted provider, so it is an @import (it must come first). The metric-matched
   fallback faces below stay here: they belong to the brand that names them. */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap");

/* Colors: ACI palette, same slot numbering as the QE's variables.css.
   NOTE: the JCT file's supplementary-N slots have different roles from ACI's (JCT 4 = link/hover/focus accent, 6 = selection
   background, 7 = error background; ACI's 4 = blue, 6 = pink, 7 = yellow). So the component layer below must not
   be compared slot by slot with the JCT file, and the theme should read the component-level names only. */
:root {
    --main-1: #FFFFFF;          /* [E] Main 1 */
    --main-2: #123652;          /* [E] Main 2 (JCT: #000000) */
    --main-3: #BC2F2C;          /* [E] Main 3 */
    --secondary-1: #777777;     /* [E] */
    --secondary-2: #ADB5BD;     /* [E] */
    --secondary-3: #F2F2F2;     /* [E] (the JSON's aCI set says #f5f5f5: check) */
    --supplementary-1: #198754; /* [E] */
    --supplementary-2: #BC2F2C; /* [E] */
    --supplementary-3: #FD7E14; /* [E] */
    --supplementary-4: #236092; /* [E] */
    --supplementary-5: #123652; /* [E] */
    --supplementary-6: #EC68AF; /* [E] */
    --supplementary-7: #F6CA4A; /* [E] */
    --supplementary-8: #8AD35D; /* [E] */
    --transparency-1: rgba(0, 0, 0, 0.6);       /* [E] (the JCT file has plain #000000: the alpha is missing there) */
    --transparency-2: rgba(0, 0, 0, 0.8);       /* [E] */
    --transparency-3: rgba(255, 255, 255, 0.6); /* [E] */
}

/* Variables */
:root {
    --link-active: #BC2F2C;                       /* [E] Link 1 */
    --link-hover: #96262C;                        /* [E] Link 2 */
    --link-disabled: #777777;                     /* [E] Link 3 */
    --main-button-background: #BC2F2C;            /* [E] Main button 1 */
    --main-button-border: #BC2F2C;                /* [E] 2 */
    --main-button-label: #FFFFFF;                 /* [E] 3 */
    --main-button-hovered-background: #96262C;    /* [E] 4 */
    --main-button-hovered-label: #FFFFFF;         /* [E] 6 */
    --main-button-hovered-border: #96262C;        /* [E] 5 */
    --main-button-disabled-background: #ADB5BD;   /* [E] 7 */
    --main-button-disabled-label: #777777;        /* [E] 9 (JCT: white) */
    --main-button-disabled-border: #ADB5BD;       /* [E] 8 */
    --secondary-button-background: #FFFFFF;       /* [E] Secondary button 1 */
    --secondary-button-border: #BC2F2C;           /* [E] 2 */
    --secondary-button-label: #BC2F2C;            /* [E] 3 */
    --secondary-button-hovered-background: #FFFFFF; /* [E] 4 */
    --secondary-button-hovered-label: #96262C;    /* [E] 6 */
    --secondary-button-hovered-border: #96262C;   /* [E] 5 */
    --secondary-button-disabled-background: #F7F7F7; /* [E] 7 */
    --secondary-button-disabled-label: #ADB5BD;   /* [E] 9 */
    --secondary-button-disabled-border: #ADB5BD;  /* [E] 8 */
    --ghost-button-background: #FFFFFF;           /* [E] Ghost button 1 (the theme does not paint it) */
    --ghost-button-border: #BC2F2C;               /* [E] 2 */
    --ghost-button-label: #BC2F2C;                /* [E] 3 */
    --ghost-button-hovered-background: #E3E3E3;   /* [E] 4 */
    --ghost-button-hovered-label: #96262C;        /* [E] 6 */
    --ghost-button-hovered-border: #96262C;       /* [E] 5 */
    --ghost-button-disabled-background: #F7F7F7;  /* [E] 7 */
    --ghost-button-disabled-label: #ADB5BD;       /* [E] 9 */
    --ghost-button-disabled-border: #ADB5BD;      /* [E] 8 */
    --radio-button--checkbox-active: #123652;     /* [I] label colour (Radio 3); the JCT file's value is main-2 */
    --radio-button--checkbox-selected: #236092;   /* [E] selected fill (Radio 2) */
    --radio-button--checkbox-hover: #236092;      /* [E] hover accent (Radio 6) */
    --radio-button--checkbox-disabled: #ADB5BD;   /* [I] unselected fill (Radio 5) */
    --radio-button--checkbox-frame-border: #ADB5BD;          /* [E] unselected border (Radio 4) */
    --radio-button--checkbox-selected-frame-border: #236092; /* [E] selected border (Radio 1) */
    --text-main-text: #123652;                    /* [E] Main 2 */
    --background-container: #FFFFFF;              /* [E] Main 1 */
    --text-secondary-text: #777777;               /* [E] Secondary 1 (QE overrides to #6E6E6E for contrast: theme.ts) */
    --background-divider: #ADB5BD;                /* [E] Secondary 2 */
    --background-foreground: #F2F2F2;             /* [E] Secondary 3 */
    --text-success: #198754;                      /* [E] Companion 1 */
    --text-error: #BC2F2C;                        /* [I] same red as primary in ACI */
    --text-warning: #FD7E14;                      /* [E] Companion 3 */
    --spacing-button-radius: 150px;               /* [E] */
    --background-selection-background: #D4E0EC;   /* [E] Backgrounds 1 */
    --background-error-background: #FFF5F5;       /* [E] Backgrounds 2 */
    --spacing-extra-small: 5px;                   /* [E] */
    --spacing-small: 10px;                        /* [E] */
    --spacing-medium: 15px;                       /* [E] */
    --spacing-large: 30px;                        /* [E] */
    --spacing-extra-large: 50px;                  /* [E] */
    --spacing-card-radius: 10px;                  /* [E] */
    --input-border: #ADB5BD;                      /* [E] fieldBox.restingBorder */
    --input-label-insite: #777777;                /* [I] Secondary 1 */
    --input-placeholder: #777777;                 /* [I] Secondary 1 */
    --input-background: #FFFFFF;                  /* [I] container */
    --input-focused-border: #236092;              /* [E] fieldBox.selectedBorder */
    --input-focused-label: #123652;               /* [I] Main 2 */
    --input-value: #123652;                       /* [I] Main 2 */
    --input-error-border: #BC2F2C;                /* [E] fieldBox.errorBorder */
    --input-error-label: #BC2F2C;                 /* [I] */
    --input-error-value: #123652;                 /* [I] Main 2 */
    --input-error-background: #FFF5F5;            /* [I] Backgrounds 2 */
    --input-disabled-border: #ADB5BD;             /* [E] fieldBox.disabledBorder */
    --input-disabled-label-outside: #777777;      /* [E] fieldBox.disabledText */
    --input-disabled-value: #777777;              /* [E] fieldBox.disabledText */
    --input-disabled-background: #F2F2F2;         /* [E] fieldBox.disabledBackground */
    --input-label-outside: #123652;               /* [I] Main 2 */
    --input-icon: #777777;                        /* [?] Secondary 1 */
    --radio-button--checkbox-icon: #777777;       /* [?] Secondary 1 */
    --radio-button--checkbox-selected-frame-background: #D4E0EC; /* [I] hover halo (Radio 7) */
    --radio-button--checkbox-error-border: #BC2F2C;              /* [?] */
    --radio-button--checkbox-error-frame-background: #FFF5F5;    /* [?] Backgrounds 2 */
    --spacing-text-field-radius: 8px;             /* [E] */
    --progress-progress-background: #FFFFFF;      /* [E] the upcoming step circle (white) */
    --progress-progress: #BC2F2C;                 /* [E] the completed and current step circle (Main 3 red) */
    --background-tooltip: rgba(0, 0, 0, 0.8);     /* [E] Transparency 2 */
    --spacing-text-field-border: 1px;             /* [E] fieldBox.borderWidth */

    /* Names added from the existing code. Values from the former tokens.ts where one exists; [?] and the six alert values are guesses. */
    --header-background: var(--supplementary-4);        /* ACI #236092: the header strip */
    --header-text: var(--main-1);
    --help-bubble-background: var(--main-2);            /* [E] the help bubble, #123652 as before */
    --help-bubble-text: var(--main-1);                  /* [E] white as before */
    --mobile-step-band-background: var(--main-2);
    --focus-ring: var(--main-2);
    --shadow-card: rgba(0, 0, 0, 0.1);
    --overlay-background: rgba(0, 0, 0, 0.6);
    --text-muted: #6E6E6E;                              /* the AA-compliant grey (4.55:1 on the page background, 5.28:1 on white); the design's Secondary 1 (#777777) is 4.48:1 on white, short of 4.5:1. Used for help text and weekday initials */
    --alert-error-background: #f9eeee;
    --alert-error-text: #502322;
    --alert-warning-background: #fef4ec;
    --alert-warning-text: #653c1a;
    --alert-success-background: #ecf5f1;
    --alert-success-text: #1c3f2f;
    --alert-info-background: #D4E0EC;                   /* the informational notice (Coverages): Backgrounds 1 */
    --alert-info-text: #123652;                         /* Main 2 */
    --alert-info-icon: #123652;                         /* Main 2: the glyph is drawn in the text colour */

    /* Fonts: whole stacks, read with f(). ACI's Raleway is loaded by the @import at the top (Google Fonts); its fallback faces are below. */
    --font-heading: "Raleway", "Raleway Fallback", "Helvetica", "Arial", sans-serif;
    --font-body: "Raleway", "Raleway Fallback", "Helvetica", "Arial", sans-serif;
    /* Type scale: the font size and line height of each published style (bold variants share them). */
    --h1-font-size: 32px;   /* [E] H1 */
    --h1-line-height: 40px;
    --h2-font-size: 28px;   /* [E] H2 */
    --h2-line-height: 35px;
    --h3-font-size: 24px;   /* [E] H3 */
    --h3-line-height: 30px;
    --h4-font-size: 20px;   /* [E] H4 */
    --h4-line-height: 26px;
    --h5-font-size: 18px;   /* [E] H5 */
    --h5-line-height: 24px;
    --h6-font-size: 16px;   /* [E] H6 */
    --h6-line-height: 22px;
    --body-font-size: 15px;   /* [E] Body */
    --body-line-height: 22px;
    --footnote-font-size: 13px;   /* [E] Footnote */
    --footnote-line-height: 18px;
    --caption-font-size: 11px;   /* [E] Caption 1 */
    --caption-line-height: 16px;
    --caption-2-font-size: 10px;   /* [E] Caption 2 */
    --caption-2-line-height: 12px;
}

/*
 * Metric-matched fallback for Raleway, so the swap from the system face to the web font (`font-display: swap`
 * in the Google Fonts stylesheet) does not move text and reflow the page.
 *
 * Measured in Chrome at 1000px against the loaded Raleway 400 (canvas measureText):
 *   x-height ratio  Raleway 0.521 · Helvetica 0.523 · Arial 0.519  → already equal within 0.4%, so the
 *                   `font-size-adjust` recipe would change nothing here and is deliberately NOT used
 *                   (with a width correction in place it would even undo it).
 *   advance width   same sample string: Raleway 400 22404 · Helvetica/Arial 400 21512 → 104.15%
 *                                       Raleway 600 22837 · Helvetica/Arial 700 22730 → 100.47%
 *                   `size-adjust` closes each gap so line breaks and element widths land where the web
 *                   font will put them. Two faces because the bold system face is proportionally wider
 *                   than the regular one, so a single factor cannot fit both weights.
 * Line heights in the theme are fixed pixel values, so the vertical overrides are unnecessary.
 *
 * Consumed as the second family in the font stacks above (`--font-heading`, `--font-body`). It lives here, not in
 * the theme, because it belongs to the brand that names it: another brand brings its own faces.
 */
@font-face {
  font-family: 'Raleway Fallback';
  font-weight: 400;
  /* Helvetica and Arial share their advance widths; Helvetica Neue does not (it is ~1.8% wider) and is
     deliberately left out so one adjustment fits both faces. */
  src: local('Helvetica'), local('Arial');
  size-adjust: 104.15%;
}

@font-face {
  font-family: 'Raleway Fallback';
  font-weight: 600;
  /* Raleway 600 is what the theme uses for bold; the nearest system faces are the 700s. */
  src: local('Helvetica-Bold'), local('Helvetica Bold'), local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 100.47%;
}