/* one+1 design system — generated by tools/compile.mjs */
/* =============================================================
   one+1 — Foundation tokens
   Source of truth for color + typography.
   Pulled from: uploads/Brand colors.png (Brand Design Evolution R2)
   Typefaces: Newsreader (display, serif) + Switzer (text, sans)
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
/* Switzer — variable font is the primary source; statics provided as fallbacks. */
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Variable.woff2') format('woff2-variations'),
       url('/fonts/Switzer-Variable.woff')  format('woff-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-VariableItalic.woff2') format('woff2-variations'),
       url('/fonts/Switzer-VariableItalic.woff')  format('woff-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Static fallbacks — load if the variable face fails. Weights 100→900 + italics. */
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Thin.woff2')           format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-ThinItalic.woff2')     format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Extralight.woff2')     format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-ExtralightItalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Light.woff2')          format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-LightItalic.woff2')    format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Regular.woff2')        format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Italic.woff2')         format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Medium.woff2')         format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-MediumItalic.woff2')   format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Semibold.woff2')       format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-SemiboldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Bold.woff2')           format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-BoldItalic.woff2')     format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Extrabold.woff2')      format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-ExtraboldItalic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-Black.woff2')          format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/Switzer-BlackItalic.woff2')    format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- Brand colors ---------- */
  /* "Core brand colors, used for CTA and difference between human and twin data." */
  --brand-light:      #EFF5FF;   /* Brand light backgrounds */
  --brand-bright:     #3073D8;   /* Twin data, primary CTA  */
  --brand-dark:       #264B8B;   /* Human data, ink, logo   */

  /* ---------- Neutrals ---------- */
  --neutral-0:        #FFFFFF;
  --neutral-100:      #EFF5FF;   /* shares brand-light */
  --neutral-200:      #CDD6E4;
  --neutral-500:      #758099;
  --neutral-900:      #2F3E59;

  /* ---------- Support palettes (infographic / illustration) ---------- */
  /* Tints → base → shade. 4 stops per family. */
  --turquoise-100:    #A4EBE5;
  --turquoise-200:    #5FD7CC;
  --turquoise-500:    #03BDAC;  /* base */
  --turquoise-700:    #03BDAC;  /* shade */

  --cyan-100:         #A0DEEA;
  --cyan-200:         #5CC2D6;
  --cyan-500:         #019CBA;  /* base */
  --cyan-700:         #015E70;  /* shade */

  --violet-100:       #D8BFE9;
  --violet-200:       #B27FD3;
  --violet-500:       #7E2AB6;  /* base */
  --violet-700:       #4C196D;

  --raspberry-100:    #EAA8E1;
  --raspberry-200:    #D563C5;
  --raspberry-500:    #BA08A1;  /* base */
  --raspberry-700:    #700561;

  --magenta-100:      #F4B7D1;
  --magenta-200:      #E86EA4;
  --magenta-500:      #D90E67;  /* base */
  --magenta-700:      #82183E;  /* shade */

  /* ---------- Semantic color tokens ---------- */
  --fg-1:             var(--brand-dark);    /* primary ink */
  --fg-2:             var(--neutral-900);   /* secondary ink */
  --fg-3:             var(--neutral-500);   /* tertiary / meta */
  --fg-on-brand:      var(--neutral-0);     /* text on brand fills */
  --fg-link:          var(--brand-bright);

  --bg-page:          var(--neutral-0);
  --bg-soft:          var(--brand-light);   /* tinted blue surface */
  --bg-card:          var(--neutral-0);
  --bg-inverse:       var(--brand-dark);

  --border-subtle:    var(--neutral-200);
  --border-strong:    var(--neutral-500);
  --border-focus:     var(--brand-bright);

  --human-data:       var(--brand-dark);    /* charts: human series */
  --twin-data:        var(--brand-bright);  /* charts: AI/digital twin series */

  --accent-turquoise: var(--turquoise-500);
  --accent-cyan:      var(--cyan-500);
  --accent-violet:    var(--violet-500);
  --accent-raspberry: var(--raspberry-500);
  --accent-magenta:   var(--magenta-500);

  /* ---------- Type families ---------- */
  --font-display:     'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-sans:        'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* No mono face in the brand. Data/labels are Switzer with tabular numerals.
     Google Workspace substitute: Newsreader is available natively; use Inter in place of Switzer. */
  --font-mono:        var(--font-sans); /* @kind font */

  /* ---------- Type scale ---------- */
  /* Display (Newsreader, regular weight, large optical size) */
  --t-display-1-size: 88px;  --t-display-1-lh: 0.98; /* @kind other */ --t-display-1-tracking: -0.02em; /* @kind other */ --t-display-1-weight: 400; /* @kind other */
  --t-display-2-size: 64px;  --t-display-2-lh: 1.02; /* @kind other */ --t-display-2-tracking: -0.02em; /* @kind other */ --t-display-2-weight: 400; /* @kind other */
  --t-display-3-size: 48px;  --t-display-3-lh: 1.05; /* @kind other */ --t-display-3-tracking: -0.015em; /* @kind other */ --t-display-3-weight: 400; /* @kind other */

  /* Headings (Newsreader, slightly heavier for hierarchy) */
  --t-h1-size: 40px; --t-h1-lh: 1.1; /* @kind other */  --t-h1-tracking: -0.015em; /* @kind other */ --t-h1-weight: 400; /* @kind other */
  --t-h2-size: 32px; --t-h2-lh: 1.15; /* @kind other */ --t-h2-tracking: -0.01em; /* @kind other */  --t-h2-weight: 400; /* @kind other */
  --t-h3-size: 24px; --t-h3-lh: 1.2; /* @kind other */  --t-h3-tracking: -0.005em; /* @kind other */ --t-h3-weight: 500; /* @kind other */

  /* Body + UI (Switzer) */
  --t-lead-size:  20px; --t-lead-lh:  1.45; /* @kind other */
  --t-body-size:  16px; --t-body-lh:  1.55; /* @kind other */
  --t-small-size: 14px; --t-small-lh: 1.5; /* @kind other */
  --t-meta-size:  13px; --t-meta-lh:  1.45; /* @kind other */

  /* Eyebrow / label — Switzer, uppercase tracked */
  --t-eyebrow-size: 12px; --t-eyebrow-lh: 1.2; /* @kind other */ --t-eyebrow-tracking: 0.14em; /* @kind other */ --t-eyebrow-weight: 600; /* @kind other */

  /* ---------- Spacing scale (4px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  /* one+1 leans heavily on stadium / pill shapes (see brand color swatches) */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(38, 75, 139, 0.06), 0 1px 1px rgba(38, 75, 139, 0.04);
  --shadow-2: 0 4px 12px rgba(38, 75, 139, 0.08), 0 1px 2px rgba(38, 75, 139, 0.04);
  --shadow-3: 0 16px 40px rgba(38, 75, 139, 0.12), 0 2px 6px rgba(38, 75, 139, 0.06);
  --shadow-focus: 0 0 0 3px rgba(48, 115, 216, 0.28);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.2, 0, 0.1, 1.2); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}

/* ============================================================
   Semantic typography classes
   ============================================================ */
html, body { color: var(--fg-1); background: var(--bg-page); }
body { font-family: var(--font-sans); font-size: var(--t-body-size); line-height: var(--t-body-lh); -webkit-font-smoothing: antialiased; }

.display-1, .display-2, .display-3,
.h1, .h2, .h3 { font-family: var(--font-display); color: var(--fg-1); text-wrap: balance; margin: 0; }

.display-1 { font-size: var(--t-display-1-size); line-height: var(--t-display-1-lh); letter-spacing: var(--t-display-1-tracking); font-weight: var(--t-display-1-weight); }
.display-2 { font-size: var(--t-display-2-size); line-height: var(--t-display-2-lh); letter-spacing: var(--t-display-2-tracking); font-weight: var(--t-display-2-weight); }
.display-3 { font-size: var(--t-display-3-size); line-height: var(--t-display-3-lh); letter-spacing: var(--t-display-3-tracking); font-weight: var(--t-display-3-weight); }

.h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-tracking); font-weight: var(--t-h1-weight); }
.h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-tracking); font-weight: var(--t-h2-weight); }
.h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-tracking); font-weight: var(--t-h3-weight); }

.lead  { font-size: var(--t-lead-size);  line-height: var(--t-lead-lh);  color: var(--fg-2); font-weight: 400; }
.body  { font-size: var(--t-body-size);  line-height: var(--t-body-lh);  color: var(--fg-2); font-weight: 400; }
.small { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--fg-2); font-weight: 400; }
.meta  { font-size: var(--t-meta-size);  line-height: var(--t-meta-lh);  color: var(--fg-3); font-weight: 400; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-tracking);
  font-weight: var(--t-eyebrow-weight);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Inline code / data */
code, .code {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  background: var(--bg-soft);
  color: var(--brand-dark);
  border-radius: var(--radius-sm);
  padding: 0.12em 0.4em;
}