/* ============================================================
   IXS COATINGS — DESIGN TOKENS
   Source: IXS_PRE_STYLE_GUIDE.pdf (Preliminary, August 2018)
   IXS Gray corrected to #565657 (style guide listed IXS Blue
   values against IXS Gray in error).

   CONTRAST RATIOS — WCAG 2.1 AA
   Measured against #FFFFFF unless stated.
     #498ECC IXS Blue        3.49:1  large text / graphics / UI only
     #416AB3 Accent Blue #1  5.33:1  PASS AA normal text — links, buttons
     #447BBF Accent Blue #2  4.35:1  large text only (>=24px, or 18.66px bold)
     #565657 IXS Gray        7.33:1  PASS AAA normal text
     #A7A9AC Accent Gray #1  2.35:1  FAIL — decorative rules and borders only
     #E6E8E9 Accent Gray #2  1.17:1  surface only, never text on white
     #2E2E2F ink (derived)  13.57:1  PASS AAA — primary body text

   Measured against #2E2E2F (dark surface):
     #FFFFFF                13.57:1  PASS AAA
     #E6E8E9 Accent Gray #2 11.04:1  PASS AAA
     #A7A9AC Accent Gray #1  5.77:1  PASS AA normal text
     #498ECC IXS Blue        3.89:1  large text / UI only
     #7FB6E5 blue tint       6.28:1  PASS AA — link colour on dark surfaces

   Measured against #1F1F20 (dark theme base):
     #E6E8E9                14.99:1  PASS AAA
     #A7A9AC                 7.00:1  PASS AA
     #7FB6E5 blue tint       7.62:1  PASS AA
   ============================================================ */

:root{
  /* Brand colour — from style guide */
  --ixs-blue:        #498ECC;
  --accent-blue-1:   #416AB3;
  --accent-blue-2:   #447BBF;
  --ixs-gray:        #565657;
  --accent-gray-1:   #A7A9AC;
  --accent-gray-2:   #E6E8E9;

  /* Derived neutrals — not in style guide, extended for web surfaces */
  --ink:             #2E2E2F;
  --ink-deep:        #1F1F20;
  --blue-tint:       #7FB6E5;

  /* Semantic — light theme */
  --bg:              #FFFFFF;
  --bg-alt:          var(--accent-gray-2);
  --bg-invert:       var(--ink);
  --text:            var(--ink);
  --text-muted:      var(--ixs-gray);
  --text-invert:     #FFFFFF;
  --text-invert-mut: var(--accent-gray-1);
  --link:            var(--accent-blue-1);
  --rule:            #D3D6D8;
  --card:            #FFFFFF;
  --card-rule:       #DCDFE1;

  /* Geometry — the slant is taken from the angled stroke of the IXS mark */
  --slant: 15deg;
  --slant-cut: 3.5vw;

  /* Type */
  --f-display: 'Saira', system-ui, sans-serif;
  --f-ui:      'Chivo', system-ui, sans-serif;
  --f-body:    'PT Sans', system-ui, sans-serif;

  --step--1: clamp(.82rem, .79rem + .13vw, .89rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + .78vw, 2rem);
  --step-3:  clamp(1.9rem, 1.58rem + 1.6vw, 2.9rem);
  --step-4:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);

  --gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --pad-y: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --shell: 1240px;
}

html[data-theme="dark"]{
  --bg:              var(--ink-deep);
  --bg-alt:          var(--ink);
  --bg-invert:       #000000;
  --text:            var(--accent-gray-2);
  --text-muted:      var(--accent-gray-1);
  --text-invert:     #FFFFFF;
  --text-invert-mut: var(--accent-gray-1);
  --link:            var(--blue-tint);   /* 7.62:1 on #1F1F20 — PASS AA */
  --rule:            #3D3D3F;
  --card:            var(--ink);
  --card-rule:       #404042;
}

/* Text size control — PROJECT.md enhanced UX standard */
html{font-size:100%}
html[data-textsize="large"]{font-size:112.5%}
html[data-textsize="xlarge"]{font-size:125%}

/* ---------- Self-hosted fonts ----------
   Industry and Klavika (the style guide faces) have no web licence yet, so
   Saira and Chivo stand in for now — see CLAUDE.md. Self-hosted rather than
   loaded from the Google Fonts CDN: a third-party font request transmits
   visitor IP addresses before consent, and this site is accessible in the EU.
   If Industry/Klavika are licensed later, swap the files and these six
   @font-face blocks — the --f-display/--f-ui/--f-body role names above
   don't change, so nothing downstream has to. */
@font-face{
  font-family:'Saira';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/saira-600.woff2') format('woff2');
}
@font-face{
  font-family:'Saira';font-style:normal;font-weight:800;font-display:swap;
  src:url('/assets/fonts/saira-800.woff2') format('woff2');
}
@font-face{
  font-family:'Saira';font-style:normal;font-weight:900;font-display:swap;
  src:url('/assets/fonts/saira-900.woff2') format('woff2');
}
@font-face{
  font-family:'Chivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/chivo-600.woff2') format('woff2');
}
@font-face{
  font-family:'Chivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/chivo-700.woff2') format('woff2');
}
@font-face{
  font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/pt-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/pt-sans-700.woff2') format('woff2');
}