/* =========================================================
   UIX modernization layer — DESIGN TOKENS
   Source: Figma "Design Assets_2026_Ironbeam"
   Scope: .uix-app
   NOTE: Tokens only. No visual rules here. Safe to load early.
   ========================================================= */

.uix-app {
  /* ---- Color: text ---- */
  --uix-color-text: #1d1d1d;            /* Text/Base/primary */
  --uix-color-text-secondary: #424242;  /* Text/Base/secondary */
  --uix-color-text-tertiary: #808080;    /* Text/Base/tertiary */

  /* Information panel (Figma 143:37548 "Account Login Required"). */
  --uix-color-surface-info: #f0f9ff;     /* Light Blue/50 */
  --uix-color-icon-info: #0da4ea;        /* Icon/Information/default */
  --uix-color-text-muted: #5c5c5c;       /* Gray/600 — page intro paragraphs */
  --uix-color-text-inverse: #ffffff;     /* Text/Base Inverse/default */

  /* ---- Color: brand ----
     The design file carries TWO green families and they are INDEPENDENT — a
     single node resolves both at once, so this is not a duplicate:
       * Buttons/Primary/default  -> the CTA background. This is the one that
         moved in the newer shared component library: #00a504 -> #3eb242.
       * Icon/Brand primary + Borders/Brand primary -> #00a504, UNCHANGED. Used
         by brand marks: stepper markers, brand borders, progress indicator.
     Values verified by pixel-sampling the rendered frames, not by variable name. */
  --uix-color-brand-text: #207c2d;       /* Text/Brand primary/default */
  --uix-color-brand: #00a504;            /* Icon/Brand primary, Borders/Brand primary */
  --uix-color-primary: #3eb242;          /* Buttons/Primary/default (newer library) */
  --uix-color-primary-hover: #207c2d;    /* Buttons/Primary/default-hover */
  --uix-color-primary-active: #145426;   /* Buttons/Primary/default-active */
  --uix-color-accent: #63ad0e;           /* Light Green/500 - Accent */
  --uix-color-on-primary: #ffffff;
  /* Disabled CTA = primary under a 60% white fill (that is how Figma draws it —
     the label stays pure white, the button is not merely faded). */
  --uix-color-primary-disabled: #b2e0b3;

  /* Secondary / tertiary / disabled buttons (Button component 127:4907) */
  --uix-color-btn-secondary: #f6f6f6;         /* Buttons/Secondary/default */
  --uix-color-btn-secondary-hover: #ece9e9;   /* Buttons/Secondary/default-hover */
  --uix-color-btn-secondary-active: #e0e0e0;  /* Buttons/Secondary/default-active */
  --uix-color-btn-tertiary: #bcbcbc;          /* Buttons/Tertiary on Surface/default */
  --uix-color-btn-tertiary-hover: #a9a9a9;    /* Buttons/Tertiary on Surface/default-hover */
  --uix-color-text-disabled: #808080;         /* Text/Disabled/primary */

  /* Input surfaces (drop zones, fields) */
  --uix-color-input-bg: rgba(0, 13, 31, 0.07); /* Surfaces/Input Field Background */
  --uix-color-input-border: #a9a9a9;           /* Surfaces/Input Field Border */
  --uix-color-card-border: #d9dade;            /* base/border — radio cards */

  /* ---- Color: surface / lines ---- */
  --uix-color-border: #e0e0e0;           /* Borders/Base/default */
  --uix-color-surface: #ffffff;          /* Background/Base */
  --uix-color-surface-muted: #f7f8f7;
  --uix-color-surface-hero: #f6f6f6;     /* hero illustration panel */
  --uix-color-bg: #ffffff;               /* Foundation/White */

  /* ---- Color: status ----
     Buttons/Danger/default is #ff6c64, but the design uses it only as a fill
     (the required-field asterisk). Error TEXT keeps the darker red: #ff6c64 on
     white is ~3:1, below the AA threshold, and the design specifies no error
     text at all — so accessibility wins here rather than a misapplied token. */
  --uix-color-danger: #dc2626;         /* error text / alerts */
  --uix-color-danger-accent: #ff6c64;  /* Buttons/Danger/default — fills, markers */
  --uix-color-success: #3eb242;        /* Buttons/Success/default */
  --uix-color-warning: #d97706;
  --uix-color-warning-text: #92400e;  /* warning text on a light amber ground (AA) */

  /* ---- Typography ---- */
  --uix-font-family: "Roboto", "Muli", "Segoe UI", Arial, sans-serif;

  /* H3 / page title */
  --uix-title-size: 32px;
  --uix-title-line: 40px;
  --uix-title-weight: 700;
  /* H6 / section + step title */
  --uix-h6-size: 20px;
  --uix-h6-line: 26px;
  --uix-h6-weight: 500;
  /* Body LG */
  --uix-body-lg-size: 18px;
  --uix-body-lg-line: 24px;
  /* Body MG */
  --uix-body-size: 16px;
  --uix-body-line: 20px;
  --uix-body-weight: 400;
  /* Body SM */
  --uix-body-sm-size: 14px;
  --uix-body-sm-line: 20px;
  /* Caption */
  --uix-caption-size: 12px;
  --uix-caption-line: 16px;

  /* ---- Spacing (Figma scale) ---- */
  --uix-space-0: 0;
  --uix-space-1: 8px;    /* Spacing/200 */
  --uix-space-2: 12px;   /* spacing/3 */
  --uix-space-3: 16px;   /* Spacing/400 */
  --uix-space-4: 24px;   /* spacing/6 */
  --uix-space-5: 32px;   /* Spacing/800 */
  --uix-space-6: 40px;   /* Spacing/950 */

  /* ---- Radius ---- */
  --uix-radius-sm: 4px;
  --uix-radius-md: 6px;     /* Button component radius */
  --uix-radius-lg: 10px;    /* border-radius/rounded-lg */
  --uix-radius-pill: 999px;
  --uix-radius-btn: 6px;    /* alias of --md, kept for readability at call sites */
  --uix-radius-input: 5px;  /* Drag&Drop / input field */
  --uix-radius-card: 10px;  /* alias of --lg */

  /* ---- Elevation ---- */
  --uix-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --uix-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  /* Figma effect "shadow illustrations" — the second layer carries a 6px spread. */
  --uix-shadow-illustration: 0 4px 4px rgba(0, 0, 0, 0.10), 0 8px 9.7px 6px rgba(0, 0, 0, 0.06);

  /* ---- Focus ----
     Library "Keyboard Focus" state: a 2px #207c2d ring held 2px off the control. */
  --uix-focus-ring: 0 0 0 2px var(--uix-color-surface), 0 0 0 4px var(--uix-color-primary-hover);

  /* ---- Page frame (Figma artboards: 1440 / 834 / 402) ----
     Every Figma frame is a full-bleed 64px header plus a content area inset by
     a fixed gutter. Measured on 45 frames: the header always spans the WHOLE
     frame width and the logo always sits on the gutter — 96px @1440, 40px @834,
     40px @402. The content gutter matches the header at 1440, and the content
     column is centered below that (see .uix-layout). */
  --uix-page-max: 1440px;
  --uix-header-height: 64px;
  --uix-gutter: 96px;        /* content inset */
  --uix-shell-gutter: 96px;  /* header inset (logo / logout) */
}

/* Tablet artboard = 834px wide, logo at x=40. */
@media (max-width: 992px) {
  .uix-app {
    --uix-gutter: 40px;
    --uix-shell-gutter: 40px;
  }
}

/* Mobile artboard = 402px wide: content at x=16 (370 wide).
   KNOWN DIFFERENCE FROM FIGMA: the artboard keeps the logo at x=40, which puts it
   24px to the right of every line of content on a phone. The client's review
   asked for the header and logo to be "aligned (left) in all pages" and flagged
   exactly this on a phone screenshot (2026-09-15), so on phones the header uses
   the content gutter. Widening the content gutter to 40px instead was rejected:
   it takes 48px from a 360px screen, which is where the tables already ran out
   of room. */
@media (max-width: 576px) {
  .uix-app {
    --uix-gutter: 16px;
    --uix-shell-gutter: var(--uix-gutter);
  }
}