/* =====================================================================
   UMAIN DESIGN SYSTEM — tokens, type, base styles
   Brand typeface: Helvetica Now Display (Monotype). Loaded locally from
   /fonts. Weights: 300 Light, 350 SemiLight, 400 Regular, 700 Bold,
   800 ExtraBold, 900 ExtBlack. 500 medium maps to SemiLight (350) — the
   brand ships no Medium-roman cut.
   ===================================================================== */

/* --- font faces ---------------------------------------------------------
   Helvetica Now Display (Monotype). All weights loaded from /fonts.
   Roman cuts available: ExtraLight 200, Light 300, SemiLight 350,
     Regular 400, Bold 700, ExtraBold 800, ExtBlack 900.
   NOTE: The brand ships no true Medium (500) roman — CSS weight 500
     falls through to Regular (400) below for the most honest mapping.
   Italic cuts: Thin 100, ExtraLight 200, Light 300, SemiLight 350,
     Medium 500, Bold 700, ExtraBold 800, Black 900.
   ------------------------------------------------------------------------ */
/* ROMAN ------------------------------------------------------------------ */
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-ExtLt.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-SemiLight.ttf") format("truetype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-Regular.ttf") format("truetype");
  /* 500 (Medium) falls through here — no true Medium cut exists. */
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-Bold.ttf") format("truetype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-ExtBlk.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* ITALIC ----------------------------------------------------------------- */
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-ThinIta.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-ExtLtIta.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-LightIta.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-SemLtIta.ttf") format("truetype");
  font-weight: 350;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-MedIta.ttf") format("truetype");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-BoldIta.ttf") format("truetype");
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-ExtBdIta.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-BlackIta.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Primitives */
  --color-black: #000000;
  --color-off-white: #F4F4F4;
  --color-white: #FFFFFF;

  --color-gray-950: #0A0A0A;
  --color-gray-900: #1A1A1A;
  --color-gray-800: #333333;
  --color-gray-700: #4D4D4D;
  --color-gray-600: #696969;
  --color-gray-500: #8C8C8C;
  --color-gray-400: #999999;
  --color-gray-300: #B3B3B3;
  --color-gray-200: #D5D5D5;
  --color-gray-100: #E8E8E8;
  --color-gray-50:  #F0F0F0;
  --color-gray-25:  #F5F5F5;

  --color-error:   #D32F2F;
  --color-success: #2E7D32;
  --color-warning: #FF450F;

  /* Orange accent scale */
  --color-orange-50:  #FDF0ED;
  --color-orange-100: #FFDBD1;
  --color-orange-200: #FFB099;
  --color-orange-300: #FF8866;
  --color-orange-400: #FF693D;
  --color-orange-500: #FF450F;
  --color-orange-600: #E63400;
  --color-orange-700: #B32800;
  --color-orange-800: #801D00;
  --color-orange-900: #4D1100;

  /* Semantic — LIGHT (default) */
  --surface-primary:   var(--color-white);
  --surface-secondary: var(--color-gray-50);
  --surface-muted:     var(--color-gray-25);
  --surface-inverted:  var(--color-black);
  --text-primary:      var(--color-black);
  --text-secondary:    var(--color-gray-700);
  --text-muted:        var(--color-gray-500);
  --text-disabled:     var(--color-gray-400);
  --border-default:    var(--color-gray-200);
  --border-strong:     var(--color-black);
  --border-subtle:     var(--color-gray-100);
  --numeral-decorative: var(--color-gray-400);
  --action-primary-bg:  var(--color-black);
  --action-primary-text: var(--color-white);

  /* Type */
  --font-display: "Helvetica Now Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
}

/* Dark mode tokens */
[data-mode="dark"] {
  --surface-primary:   var(--color-black);
  --surface-secondary: var(--color-gray-900);
  --surface-muted:     var(--color-gray-950);
  --surface-inverted:  var(--color-off-white);
  --text-primary:      var(--color-off-white);
  --text-secondary:    var(--color-gray-300);
  --text-muted:        var(--color-gray-600);
  --text-disabled:     var(--color-gray-700);
  --border-default:    var(--color-gray-700);
  --border-strong:     var(--color-off-white);
  --border-subtle:     var(--color-gray-800);
  --numeral-decorative: var(--color-gray-900);
  --action-primary-bg:  var(--color-off-white);
  --action-primary-text: var(--color-black);
}

/* =====================================================================
   Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =====================================================================
   Type scale — all values verified against the Figma spec
   Bold is default; Black reserved for display-xxl/xl.
   ===================================================================== */
.t-display-xxl { font-weight: 700; font-size: 160px; line-height: 0.85; letter-spacing: -0.03em; }
.t-display-xl  { font-weight: 700; font-size: 96px;  line-height: 0.90; letter-spacing: -0.02em; }
.t-display-lg  { font-weight: 700; font-size: 72px;  line-height: 0.95; letter-spacing: -0.02em; }
.t-display-md  { font-weight: 700; font-size: 56px;  line-height: 1.00; letter-spacing: -0.01em; }
.t-display-sm  { font-weight: 700; font-size: 40px;  line-height: 1.05; letter-spacing: -0.01em; }
.t-heading-lg  { font-weight: 700; font-size: 32px;  line-height: 1.15; letter-spacing: -0.005em; }
.t-heading-md  { font-weight: 700; font-size: 24px;  line-height: 1.20; letter-spacing: 0; }
.t-heading-sm  { font-weight: 700; font-size: 20px;  line-height: 1.25; letter-spacing: 0; }
.t-body-lg     { font-weight: 500; font-size: 18px;  line-height: 1.50; letter-spacing: 0; }
.t-body-md     { font-weight: 500; font-size: 16px;  line-height: 1.50; letter-spacing: 0; }
.t-body-sm     { font-weight: 500; font-size: 14px;  line-height: 1.50; letter-spacing: 0.005em; }
.t-label-lg    { font-weight: 500; font-size: 14px;  line-height: 1.30; letter-spacing: 0.02em; text-transform: uppercase; }
.t-label-md    { font-weight: 500; font-size: 12px;  line-height: 1.30; letter-spacing: 0.03em; text-transform: uppercase; }
.t-label-sm    { font-weight: 500; font-size: 11px;  line-height: 1.30; letter-spacing: 0.04em; text-transform: uppercase; }

/* Slide-display sizes (1920×1080 canvas only) */
.t-slide-2xl { font-weight: 700; font-size: 220px; line-height: 0.85; letter-spacing: -0.02em; }
.t-slide-3xl { font-weight: 700; font-size: 280px; line-height: 0.80; letter-spacing: -0.03em; }
.t-slide-mega { font-weight: 700; font-size: 430px; line-height: 0.70; letter-spacing: -0.02em; }

/* =====================================================================
   Primitives
   ===================================================================== */
.u-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Vertical border (signature column separator, never on first column) */
.u-vborder { border-left: 2px solid var(--border-default); padding-left: var(--space-8); }

/* Umain square — 15×15 brand mark */
.u-square { display: inline-block; width: 15px; height: 15px; background: currentColor; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  padding: 16px 24px;
  border-radius: 0; /* sharp corners only */
  transition: background 120ms ease, color 120ms ease;
}
.btn--primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
}
.btn--primary:hover { background: var(--color-gray-800); }
[data-mode="dark"] .btn--primary:hover { background: var(--color-gray-200); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-inverted); color: var(--surface-primary); }

.btn--text {
  background: transparent;
  color: var(--text-primary);
  padding: 8px 0;
}
.btn--text svg { width: 16px; height: 16px; }

.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

/* =====================================================================
   Form controls (underline style)
   ===================================================================== */
.field { display: flex; flex-direction: column; gap: 12px; }
.field__label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-transform: none;
}
.field__input {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  padding: 4px 0 10px;
  border: none;
  border-bottom: 1.5px solid var(--color-gray-300);
  background: transparent;
  color: var(--text-primary);
  outline: none;
  transition: border-color 120ms ease;
}
.field__input::placeholder { color: var(--text-disabled); }
.field__input:focus { border-bottom-color: var(--text-primary); }
.field[data-state="error"] .field__input { border-bottom-color: var(--color-error); color: var(--color-error); }
.field__error {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--color-error);
}

/* =====================================================================
   Minimal table
   ===================================================================== */
.u-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.u-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px 24px 16px 0;
  border-top: 1.5px solid var(--border-default);
  border-bottom: 1.5px solid var(--border-default);
  white-space: nowrap;
}
.u-table tbody td {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 500;
  color: var(--text-primary);
}
.u-table tbody td:last-child { padding-right: 0; }

/* =====================================================================
   Slide canvas
   ===================================================================== */
.slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-off-white);
  font-family: var(--font-display);
}
.slide--light {
  background: var(--color-off-white);
  color: var(--color-black);
}

/* Slide header — 1920 × 96 with mix-blend-mode difference */
.slide-header {
  position: absolute;
  inset: 0 0 auto 0;
  height: 96px;
  padding: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 10;
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.slide-header__meta {
  display: flex;
  gap: 40px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}
.slide-header__mark {
  width: 15px;
  height: 15px;
  background: #fff;
}