/* ============================================================
   Unisys Design System — Colors & Type
   Based on Unisys Brand Guidelines 2.0
   ============================================================ */

/* ────────────────────────────────────────────────────────
   FONT · Unisys (formerly Tomato Grotesk) — the brand face.
   Proprietary 9-weight grotesk with slanted versions for
   emphasis. Slanted is NOT regular italic — reserve it for
   short bursts of emphasis only. Brand-spec fallback: Arial.
   ──────────────────────────────────────────────────────── */
@font-face { font-family: "Unisys"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/Unisys-Thin.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/Unisys-ThinSlanted.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/Unisys-ExtraLight.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/Unisys-ExtraLightSlanted.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Unisys-Light.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/Unisys-LightSlanted.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Unisys-Regular.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Unisys-RegularSlanted.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Unisys-Medium.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/Unisys-MediumSlanted.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Unisys-SemiBold.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/Unisys-SemiBoldSlanted.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Unisys-Bold.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/Unisys-BoldSlanted.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/Unisys-ExtraBold.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/Unisys-ExtraBoldSlanted.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/Unisys-Black.otf") format("opentype"); }
@font-face { font-family: "Unisys"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/Unisys-BlackSlanted.otf") format("opentype"); }

/* JetBrains Mono for code / tokens · keep the Google import */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ────────────────────────────────────────────────────────
     PRIMARY PALETTE — anchors 80%+ of every layout
     ──────────────────────────────────────────────────────── */
  --u-dark-teal:        #003134;  /* Primary 01 · PMS 548 C */
  --u-propel-mint:      #00E28B;  /* Primary 02 · Signature · PMS 2412 C */
  --u-white:            #FFFFFF;  /* Primary 03 */

  /* ────────────────────────────────────────────────────────
     SECONDARY PALETTE — pair with a primary · approved data viz
     ──────────────────────────────────────────────────────── */
  --u-purposeful-teal:  #007173;  /* PMS 2237 C */
  --u-imagination-aqua: #00FFFF;  /* PMS 2197 C */
  --u-joyful-melon:     #CFFF8F;  /* PMS 2281 C */
  --u-innovation-blue:  #1B00EB;  /* PMS 293 C */

  /* ────────────────────────────────────────────────────────
     TERTIARY PALETTE — accent only · never lead, never large bg
     ──────────────────────────────────────────────────────── */
  --u-visionary-violet:    #AE00FF;  /* PMS Purple C / 2592 C */
  --u-momentum-aubergine:  #42004C;  /* PMS 2627 C */
  --u-relentless-red:      #FB2C28;  /* PMS 485 C · accent only */

  /* ────────────────────────────────────────────────────────
     FUNCTIONAL · body type & working surfaces
     ──────────────────────────────────────────────────────── */
  --u-black:           #2A2A2A;   /* Body copy on white */
  --u-canvas-wash:     #F4FBF7;   /* Subtle off-white. Sparingly. */

  /* ────────────────────────────────────────────────────────
     DARK TEAL · 3 shades + 3 tints (data-viz only)
     ──────────────────────────────────────────────────────── */
  --u-dark-teal-shade-3:  #00090A;
  --u-dark-teal-shade-2:  #001A1C;
  --u-dark-teal-shade-1:  #002426;
  --u-dark-teal-tint-1:   #335A5D;
  --u-dark-teal-tint-2:   #4C6F71;
  --u-dark-teal-tint-3:   #668385;

  /* PROPEL MINT · 3 shades + 3 tints */
  --u-propel-mint-shade-3: #00AB69;
  --u-propel-mint-shade-2: #00BD75;
  --u-propel-mint-shade-1: #00CF7F;
  --u-propel-mint-tint-1:  #40E9A8;
  --u-propel-mint-tint-2:  #73EFBF;
  --u-propel-mint-tint-3:  #A6F5D6;

  /* INNOVATION BLUE · 2 shades + 3 tints */
  --u-innovation-blue-shade-2: #110094;
  --u-innovation-blue-shade-1: #1600BF;
  --u-innovation-blue-tint-1:  #3D26EE;
  --u-innovation-blue-tint-2:  #5F4CF1;
  --u-innovation-blue-tint-3:  #8273F4;

  /* PURPOSEFUL TEAL · 3 shades + 3 tints */
  --u-purposeful-teal-shade-3: #003C3D;
  --u-purposeful-teal-shade-2: #004E4F;
  --u-purposeful-teal-shade-1: #005F61;
  --u-purposeful-teal-tint-1:  #338D8F;
  --u-purposeful-teal-tint-2:  #59A3A4;
  --u-purposeful-teal-tint-3:  #80B8B9;

  /* IMAGINATION AQUA · 3 shades + 3 tints */
  --u-imagination-aqua-shade-3: #00C9C9;
  --u-imagination-aqua-shade-2: #00DBDB;
  --u-imagination-aqua-shade-1: #00EDED;
  --u-imagination-aqua-tint-1:  #80FFFF;
  --u-imagination-aqua-tint-2:  #B2FFFF;
  --u-imagination-aqua-tint-3:  #CCFFFF;

  /* JOYFUL MELON · 3 shades + 3 tints */
  --u-joyful-melon-shade-3: #B4E86F;
  --u-joyful-melon-shade-2: #BAF074;
  --u-joyful-melon-shade-1: #C0F777;
  --u-joyful-melon-tint-1:  #D9FFA5;
  --u-joyful-melon-tint-2:  #E2FFBC;
  --u-joyful-melon-tint-3:  #ECFFD2;

  /* INNOVATION BLUE · 3 shades + 3 tints (extending the partial ramp above) */
  --u-innovation-blue-shade-3: #0C0066;

  /* VISIONARY VIOLET · 3 shades + 3 tints */
  --u-visionary-violet-shade-3: #8E00A3;
  --u-visionary-violet-shade-2: #9F00B8;
  --u-visionary-violet-shade-1: #B100CC;
  --u-visionary-violet-tint-1:  #D033E7;
  --u-visionary-violet-tint-2:  #D959EB;
  --u-visionary-violet-tint-3:  #E180F0;

  /* MOMENTUM AUBERGINE · 3 shades + 3 tints */
  --u-aubergine-shade-3: #0B000D;
  --u-aubergine-shade-2: #210026;
  --u-aubergine-shade-1: #310038;
  --u-aubergine-tint-1:  #683370;
  --u-aubergine-tint-2:  #7B4C82;
  --u-aubergine-tint-3:  #8E6694;

  /* RELENTLESS RED · 3 shades + 3 tints (accent only — never as a background) */
  --u-relentless-red-shade-3: #C4221F;
  --u-relentless-red-shade-2: #D62522;
  --u-relentless-red-shade-1: #E82925;
  --u-relentless-red-tint-1:  #FC5653;
  --u-relentless-red-tint-2:  #FC7673;
  --u-relentless-red-tint-3:  #FD9593;

  /* BLACK · 3 shades + 3 tints (working greyscale) */
  --u-black-shade-3: #000000;
  --u-black-shade-2: #0D0D0D;
  --u-black-shade-1: #1A1A1A;
  --u-black-tint-1:  #555555;
  --u-black-tint-2:  #6A6A6A;
  --u-black-tint-3:  #7F7F7F;

  /* FOCUS EFFECT · 90–130 px Gaussian over a hard-masked region */
  --u-focus-blur:  110px;     /* tune per layout within 90–130 */

  /* CO-BRANDING · clearspace measured in U-widths */
  --u-cobrand-gap-h: 2;       /* unitless · multiply by U width */
  --u-cobrand-gap-v: 1;       /* unitless · multiply by U height */

  /* ────────────────────────────────────────────────────────
     SEMANTIC · status & UI
     ──────────────────────────────────────────────────────── */
  --u-fg:           var(--u-dark-teal);
  --u-fg-muted:     rgba(0, 49, 52, 0.64);
  --u-fg-subtle:    rgba(0, 49, 52, 0.42);
  --u-fg-inverse:   var(--u-white);
  --u-bg:           var(--u-white);
  --u-bg-soft:      var(--u-canvas-wash);
  --u-bg-anchor:    var(--u-dark-teal);

  --u-state-success: var(--u-propel-mint-shade-3);
  --u-state-info:    var(--u-innovation-blue);
  --u-state-warn:    var(--u-joyful-melon);
  --u-state-danger:  var(--u-relentless-red);
  --u-state-focus:   var(--u-innovation-blue);

  /* ────────────────────────────────────────────────────────
     BORDERS · square corners, Dark Teal lineage
     ──────────────────────────────────────────────────────── */
  --u-border-subtle:  rgba(0, 49, 52, 0.12);  /* hairline dividers */
  --u-border-default: rgba(0, 49, 52, 0.24);  /* inputs, card edges */
  --u-border-strong:  var(--u-dark-teal);     /* 1.5–2 px emphatic */

  /* ────────────────────────────────────────────────────────
     RADII · the U-curve
     ──────────────────────────────────────────────────────── */
  --u-radius-none:    0;
  --u-radius-xs:      4px;
  --u-radius-sm:      8px;
  --u-radius-md:      16px;
  --u-radius-u:       28px;        /* HERO · the U-curve · also the button radius */
  --u-radius-lg:      40px;
  --u-radius-pill:    9999px;      /* Full stadium · circular icon buttons & pills only */

  /* ────────────────────────────────────────────────────────
     SPACING · 8-pt base scale
     ──────────────────────────────────────────────────────── */
  --u-space-0:   0;
  --u-space-1:   4px;
  --u-space-2:   8px;
  --u-space-3:   12px;
  --u-space-4:   16px;
  --u-space-5:   24px;
  --u-space-6:   32px;
  --u-space-7:   48px;
  --u-space-8:   64px;
  --u-space-9:   96px;
  --u-space-10:  128px;

  /* ────────────────────────────────────────────────────────
     ELEVATION · reserved for UI affordances only
     ──────────────────────────────────────────────────────── */
  --u-elev-0:     none;
  --u-elev-1:     0 1px 2px rgba(0, 49, 52, 0.08);
  --u-elev-2:     0 4px 12px rgba(0, 49, 52, 0.10);
  --u-elev-3:     0 12px 32px rgba(0, 49, 52, 0.14);
  --u-elev-modal: 0 24px 64px rgba(0, 49, 52, 0.24);

  /* ────────────────────────────────────────────────────────
     MOTION · three principles · always forward · no bounces
     ──────────────────────────────────────────────────────── */
  --u-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --u-ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --u-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --u-dur-fast:    140ms;
  --u-dur-base:    220ms;
  --u-dur-slow:    560ms;

  /* ────────────────────────────────────────────────────────
     TYPE · base
     The display set is deliberately big, left-aligned,
     sentence case, tracked tight (−0.030em on most heads).
     ──────────────────────────────────────────────────────── */
  --u-font-sans: "Unisys", Arial, sans-serif;
  --u-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE SCALE — clamps so display sizes ramp with viewport */
  --u-fs-display-xl: clamp(72px, 10vw, 128px);
  --u-fs-display:    clamp(48px, 6.5vw, 96px);
  --u-fs-h1:         clamp(40px, 4.5vw, 64px);
  --u-fs-h2:         clamp(32px, 3.4vw, 48px);
  --u-fs-h3:         clamp(24px, 2.4vw, 32px);
  --u-fs-subhead:    20px;
  --u-fs-eyebrow:    13px;
  --u-fs-body:       16px;
  --u-fs-caption:    12px;

  /* WEIGHTS · 9 weights are available */
  --u-fw-thin:       100;
  --u-fw-extralight: 200;
  --u-fw-light:      300;
  --u-fw-regular:    400;
  --u-fw-medium:     500;
  --u-fw-semibold:   600;
  --u-fw-bold:       700;
  --u-fw-extrabold:  800;
  --u-fw-black:      900;

  /* TRACKING · negative on display, positive on eyebrow/body */
  --u-tr-display: -0.030em;
  --u-tr-h1:      -0.030em;
  --u-tr-h2:      -0.025em;
  --u-tr-h3:      -0.020em;
  --u-tr-subhead: -0.018em;
  --u-tr-eyebrow:  0.10em;
  --u-tr-body:     0.005em;

  /* LEADING · displays are tight (1.0), body relaxes to 1.5 */
  --u-lh-display: 1.0;
  --u-lh-heading: 1.1;
  --u-lh-body:    1.5;
  --u-lh-tight:   1.2;
}

/* ============================================================
   Semantic element styles · h1–h6 / p / small / code
   Drop colors_and_type.css into a page and the basics work.
   ============================================================ */
html, body {
  background: var(--u-bg);
  color: var(--u-fg);
  font-family: var(--u-font-sans);
  font-size: var(--u-fs-body);
  line-height: var(--u-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .u-heading {
  font-family: var(--u-font-sans);
  font-weight: var(--u-fw-bold);
  line-height: var(--u-lh-display);
  margin: 0;
  /* Sentence case is enforced editorially, not by CSS — never Title Case */
}
h1 { font-size: var(--u-fs-h1);      letter-spacing: var(--u-tr-h1); }
h2 { font-size: var(--u-fs-h2);      letter-spacing: var(--u-tr-h2); font-weight: var(--u-fw-semibold); }
h3 { font-size: var(--u-fs-h3);      letter-spacing: var(--u-tr-h3); font-weight: var(--u-fw-semibold); }
h4 { font-size: var(--u-fs-subhead); letter-spacing: var(--u-tr-subhead); font-weight: var(--u-fw-semibold); line-height: var(--u-lh-tight); }
h5 { font-size: 18px; letter-spacing: -0.012em; font-weight: var(--u-fw-semibold); }
h6 { font-size: 16px; letter-spacing: 0; font-weight: var(--u-fw-bold); text-transform: none; }

p, .u-body {
  font-size: var(--u-fs-body);
  line-height: var(--u-lh-body);
  letter-spacing: var(--u-tr-body);
  margin: 0 0 var(--u-space-4) 0;
}
small, .u-caption {
  font-size: var(--u-fs-caption);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.u-eyebrow {
  font-size: var(--u-fs-eyebrow);
  letter-spacing: var(--u-tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--u-fw-bold);
}
.u-display    { font-size: var(--u-fs-display);    letter-spacing: var(--u-tr-display); font-weight: var(--u-fw-bold); line-height: var(--u-lh-display); }
.u-display-xl { font-size: var(--u-fs-display-xl); letter-spacing: -0.035em; font-weight: var(--u-fw-bold); line-height: var(--u-lh-display); }

code, kbd, samp, .u-mono {
  font-family: var(--u-font-mono);
  font-size: 0.92em;
}
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--u-dur-base) var(--u-ease-out);
}
a:hover { color: var(--u-purposeful-teal); }

::selection { background: var(--u-propel-mint); color: var(--u-dark-teal); }

/* Focus ring · always Innovation Blue · 3 px / 2 px offset */
:focus-visible {
  outline: 3px solid var(--u-state-focus);
  outline-offset: 2px;
}