/*
 * Voyager Technologies design tokens
 * Source: Voyager Brand Guidelines v2.0 (April 2026), sections 04 Color,
 * 05 Typography, 06 Visual Elements. Shared by the internal operations
 * workspace (styles.css) and the employee portal (hub.css). Surface-specific
 * stylesheets alias their local variable names onto these tokens; new rules
 * should reference the --vt-* tokens directly.
 */

@font-face {
  font-family: "Good Times";
  src: url("/fonts/Good-Times-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "GT America";
  src: url("/fonts/GT-America-Standard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "GT America";
  src: url("/fonts/GT-America-Standard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "GT America Mono";
  src: url("/fonts/GT-America-Mono-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* 4.1 Palette — primary */
  --vt-galaxy-blue: #0e193a;
  --vt-cloud-gray: #f2f6fc;
  /* 4.1 Palette — secondary */
  --vt-orbital-purple: #4b25b0;
  --vt-purple-accent: #6370f9;
  --vt-halo-blue: #9bafef;
  --vt-helios-gold: #b59e5c;
  --vt-solar-gold: #d4af37;
  --vt-black: #000000;
  --vt-white: #ffffff;

  /* Channel triplets for rgb(var(--x) / alpha) tints */
  --vt-galaxy-rgb: 14 25 58;
  --vt-orbital-rgb: 75 37 176;
  --vt-accent-rgb: 99 112 249;
  --vt-halo-rgb: 155 175 239;
  --vt-solar-rgb: 212 175 55;
  --vt-helios-rgb: 181 158 92;
  --vt-white-rgb: 255 255 255;

  /* Surfaces: white cards on a Cloud Gray canvas; deeper steps mix in Galaxy Blue */
  --vt-surface-0: var(--vt-white);
  --vt-surface-1-soft: color-mix(in srgb, var(--vt-cloud-gray) 50%, var(--vt-white));
  --vt-surface-1: var(--vt-cloud-gray);
  --vt-surface-2: color-mix(in srgb, var(--vt-galaxy-blue) 4%, var(--vt-cloud-gray));
  --vt-surface-3: color-mix(in srgb, var(--vt-galaxy-blue) 8%, var(--vt-cloud-gray));
  --vt-surface-4: color-mix(in srgb, var(--vt-galaxy-blue) 14%, var(--vt-cloud-gray));
  --vt-surface-dark: var(--vt-galaxy-blue);
  --vt-surface-dark-2: color-mix(in srgb, var(--vt-galaxy-blue) 84%, var(--vt-orbital-purple));
  --vt-surface-dark-3: color-mix(in srgb, var(--vt-galaxy-blue) 70%, var(--vt-black));

  /* Lines */
  --vt-line-1: rgb(var(--vt-galaxy-rgb) / 10%);
  --vt-line-2: rgb(var(--vt-galaxy-rgb) / 16%);
  --vt-line-3: rgb(var(--vt-galaxy-rgb) / 26%);
  --vt-line-on-dark: rgb(var(--vt-white-rgb) / 12%);
  --vt-line-on-dark-2: rgb(var(--vt-white-rgb) / 20%);

  /* Ink: Galaxy Blue for headings; mixed toward white for supporting text.
     ink-3 (~#656c81, 5.25:1 on white) is the lightest ink that passes WCAG AA for
     text. ink-4 (~2.98:1) and ink-5 (~2.04:1) are for NON-TEXT use only: hairlines,
     disabled glyphs, placeholder dots, chevrons. Use --vt-text-secondary for
     secondary copy. */
  --vt-ink: var(--vt-galaxy-blue);
  --vt-ink-2: color-mix(in srgb, var(--vt-galaxy-blue) 82%, var(--vt-white));
  --vt-ink-3: color-mix(in srgb, var(--vt-galaxy-blue) 64%, var(--vt-white));
  --vt-text-secondary: var(--vt-ink-3);
  --vt-ink-4: color-mix(in srgb, var(--vt-galaxy-blue) 46%, var(--vt-white));
  --vt-ink-5: color-mix(in srgb, var(--vt-galaxy-blue) 32%, var(--vt-white));
  --vt-ink-on-dark: var(--vt-cloud-gray);
  --vt-ink-on-dark-2: rgb(var(--vt-white-rgb) / 78%);
  --vt-ink-on-dark-3: rgb(var(--vt-white-rgb) / 58%);

  /* Interactive accent: Purple Accent for fills/rings, Orbital Purple where text needs AA contrast */
  --vt-accent: var(--vt-purple-accent);
  --vt-accent-strong: var(--vt-orbital-purple);
  --vt-accent-text: var(--vt-orbital-purple);
  --vt-accent-soft: rgb(var(--vt-accent-rgb) / 10%);
  --vt-accent-soft-2: rgb(var(--vt-accent-rgb) / 18%);
  --vt-accent-line: rgb(var(--vt-accent-rgb) / 35%);
  --vt-halo-soft: rgb(var(--vt-halo-rgb) / 24%);
  --vt-focus-ring: 0 0 0 3px rgb(var(--vt-accent-rgb) / 30%);

  /* Gold: Helios for metallic accents/borders, Solar for badges and emphasis */
  --vt-gold: var(--vt-helios-gold);
  --vt-gold-bright: var(--vt-solar-gold);
  --vt-gold-soft: rgb(var(--vt-solar-rgb) / 16%);
  --vt-gold-line: rgb(var(--vt-helios-rgb) / 45%);

  /* Status colors are not part of the brand palette; a single restrained set is
     used across both surfaces so state reads consistently. */
  --vt-success: #147856;
  --vt-success-strong: #0f5f44;
  --vt-success-soft: #e6f4ee;
  --vt-success-line: #b9dccb;
  --vt-warning: #845900;
  --vt-warning-strong: #6a4700;
  --vt-warning-soft: #fdf3dc;
  --vt-warning-line: #ead9a8;
  --vt-danger: #a52830;
  --vt-danger-strong: #8c2028;
  --vt-danger-soft: #fdeff0;
  --vt-danger-line: #efb7bd;
  --vt-info: var(--vt-accent-text);
  --vt-info-soft: var(--vt-accent-soft);
  --vt-info-line: var(--vt-accent-line);

  /* 5.1 Typography */
  --vt-font-display: "Good Times", Arial, sans-serif;
  --vt-font-body: "GT America", Arial, Helvetica, sans-serif;
  --vt-font-mono: "GT America Mono", "SF Mono", Menlo, monospace;
  --vt-eyebrow-tracking: 0.08em;
  --vt-display-tracking: 0.02em;

  /* Radius scale */
  --vt-radius-xs: 2px;
  --vt-radius-sm: 4px;
  --vt-radius-md: 6px;
  --vt-radius-lg: 8px;
  --vt-radius-xl: 12px;
  --vt-radius-pill: 999px;

  /* Elevation */
  --vt-shadow-sm: 0 1px 2px rgb(var(--vt-galaxy-rgb) / 5%), 0 4px 12px rgb(var(--vt-galaxy-rgb) / 6%);
  --vt-shadow-md: 0 8px 24px rgb(var(--vt-galaxy-rgb) / 10%);
  --vt-shadow-lg: 0 14px 34px rgb(var(--vt-galaxy-rgb) / 16%);
  --vt-shadow-dark: 0 15px 38px rgb(var(--vt-galaxy-rgb) / 32%);

  /* 4.2 Gradients. G1 is tuned for textured imagery, G2 for flat fills. */
  --vt-gradient-textured: linear-gradient(
    180deg,
    var(--vt-cloud-gray) 0%,
    var(--vt-purple-accent) 36%,
    var(--vt-orbital-purple) 66%,
    var(--vt-black) 100%
  );
  --vt-gradient-flat: linear-gradient(
    180deg,
    var(--vt-cloud-gray) 0%,
    var(--vt-halo-blue) 30%,
    var(--vt-orbital-purple) 66%,
    var(--vt-black) 100%
  );
  /* Panel gradients for dark hero moments inside the applications */
  --vt-gradient-hero: linear-gradient(135deg, var(--vt-galaxy-blue) 0%, var(--vt-surface-dark-2) 55%, var(--vt-orbital-purple) 100%);
  --vt-gradient-hero-deep: linear-gradient(160deg, var(--vt-surface-dark-3) 0%, var(--vt-galaxy-blue) 48%, var(--vt-orbital-purple) 100%);
  --vt-gradient-accent: linear-gradient(90deg, var(--vt-orbital-purple), var(--vt-purple-accent));
  --vt-gradient-halo: radial-gradient(circle at 100% 0%, rgb(var(--vt-halo-rgb) / 34%), transparent 40%);

}