/* UBT Technology design system for the hub, the customer portal and every tool.
   Source: the "UBT Technology Design System" (claude.ai, shared in the UBT organisation).
   How it is applied here: docs/design-system.md.

   Rules in short: Technology teal leads (actions, accents, gradients); navy is for headings and the
   logo; red is a sparing accent for errors and destructive actions only, never decoration. Headings
   use Neuzeit Grotesk Bold, screen/UI text uses Karla. The shard (diagonal teal-gradient cut) is the
   signature device for headers and covers. Every page links this file. */

/* ── Licensed brand fonts (self-hosted) ─────────────────────────────────────── */
@font-face { font-family: "Neuzeit Grotesk"; src: url("/assets/fonts/NeuzeitGro-Lig.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Neuzeit Grotesk"; src: url("/assets/fonts/NeuzeitGro-Reg.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Neuzeit Grotesk"; src: url("/assets/fonts/NeuzeitGro-Bol.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/Karla-Regular.ttf") format("truetype"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/Karla-Italic.ttf") format("truetype"); font-weight: 300 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/Karla-Bold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/Karla-BoldItalic.ttf") format("truetype"); font-weight: 600 900; font-style: italic; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  /* Pillar teal (leads) */
  --tech-teal: #00A5BB;
  --tech-teal-deep: #005E82;
  --tech-teal-light: #66C9D6;
  --tech-teal-900: #06384A;
  --tech-teal-800: #005E82;
  --tech-teal-700: #007A95;
  --tech-teal-600: #0093AB;
  --tech-teal-500: #00A5BB;
  --tech-teal-400: #33B7C9;
  --tech-teal-300: #66C9D6;
  --tech-teal-200: #A3DEE6;
  --tech-teal-100: #D2EFF3;
  --tech-teal-50:  #ECF8FA;

  /* Corporate (headings, logo, sparing accent) */
  --ubt-navy: #1A1C63;
  --ubt-navy-700: #2A2D7A;
  --ubt-red: #EE202E;
  --ubt-red-700: #C7121E;

  /* Neutrals (functional) */
  --ink: #15303D;
  --ink-700: #2E4956;
  --ink-500: #5A727D;
  --ink-400: #8499A2;
  --line: #DCE7EC;
  --line-strong: #C2D3DA;
  --surface: #FFFFFF;
  --surface-tint: #F3F9FB;
  --surface-sunken: #ECF3F6;

  /* Roles */
  --color-primary: var(--tech-teal);
  --color-primary-hover: var(--tech-teal-600);
  --color-primary-active: var(--tech-teal-700);
  --color-primary-tint: var(--tech-teal-50);
  --text-heading: var(--ubt-navy);
  --text-body: var(--ink);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-link: var(--tech-teal-700);

  /* Status (UI only) */
  --success: #1F9D6B;  --success-tint: #E7F5EF;
  --warning: #E08A1E;  --warning-tint: #FBF1E0;
  --danger:  #EE202E;  --danger-tint:  #FDE7E8;
  --info:    #0093AB;  --info-tint:    #ECF8FA;
  /* Status as small text (on white or its tint): darker shades that meet WCAG AA 4.5:1. */
  --success-text: #137A52;
  --warning-text: #8F5300;
  --danger-text:  #B3141F;
  --info-text:    #007A95;

  /* Gradients (135°) */
  --grad-dark:  linear-gradient(135deg, #00A5BB 0%, #005E82 100%);
  --grad-light: linear-gradient(135deg, #66C9D6 0%, #00A5BB 100%);

  /* Type */
  --font-display: "Neuzeit Grotesk", Arial, sans-serif;
  --font-body: "Neuzeit Grotesk", Arial, sans-serif;
  --font-digital: "Karla", Arial, sans-serif;
  --tracking-label: 0.16em;

  /* Shape */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(21, 48, 61, .06);
  --shadow-sm: 0 1px 3px rgba(21, 48, 61, .08), 0 1px 2px rgba(21, 48, 61, .06);
  --shadow-md: 0 4px 12px rgba(6, 56, 74, .10), 0 2px 4px rgba(6, 56, 74, .06);
  --shadow-lg: 0 12px 32px rgba(6, 56, 74, .14), 0 4px 8px rgba(6, 56, 74, .06);
  --focus-ring: 0 0 0 3px rgba(0, 165, 187, .35);
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* The shard: one diagonal (~24°) per layout */
  --shard-clip-right: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
  --shard-clip-corner: polygon(100% 35%, 100% 100%, 38% 100%);

  /* Logos */
  --ubt-logo-white: url('/assets/ubt-logo-white.png');
  --ubt-logo-colour: url('/assets/ubt-logo-colour.png');
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
h1, h2, h3, .ubt-heading { font-family: var(--font-display); font-weight: 700; }
::selection { background: var(--tech-teal-100); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
a { color: inherit; }

/* ── Brand helpers ──────────────────────────────────────────────────────────── */
/* Tracked uppercase eyebrow / label (e.g. CREATING POSSIBILITIES, section labels). */
.ubt-eyebrow { font-family: var(--font-digital); font-weight: 700; font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--tech-teal-700); }
.ubt-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--text-heading); }

/* App header: dark teal gradient with a light shard bled off the right edge. Add to any header bar. */
.ubt-app-header { position: relative; overflow: hidden; background: var(--grad-dark); color: #fff; }
.ubt-app-header::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 34%; background: var(--grad-light); clip-path: var(--shard-clip-right); opacity: .35; pointer-events: none; }
.ubt-app-header > * { position: relative; z-index: 1; }

/* Shards for heroes/covers: a light cut over a dark gradient base, bled off the edge. */
.ubt-shard { background: var(--grad-dark); clip-path: var(--shard-clip-right); }
.ubt-shard--light { background: var(--grad-light); }
.ubt-shard--corner { clip-path: var(--shard-clip-corner); }

/* Petal mark watermark (low opacity, decorative only). */
.ubt-petal-watermark { background: url('/assets/ubt-petal-white.png') no-repeat center / contain; opacity: .08; pointer-events: none; }

/* ── Logos ──────────────────────────────────────────────────────────────────── */
.ubt-logo { display: inline-block; width: auto; max-width: 100%; object-fit: contain; vertical-align: middle; }
.ubt-logo-nav { height: 34px; }
.ubt-logo-compact { height: 28px; }
.ubt-logo-large { height: 52px; }
.ubt-logo-on-white { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 10px; }
.nav-brand .ubt-logo, .logo .ubt-logo { display: block; flex: 0 0 auto; }

.customer-logo { display: block; width: 52px; height: 52px; border-radius: var(--radius-md); object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 6px; }

/* Printed documents keep brand colours. */
@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }