/* S4GA Micro Portal — design tokens.
   Values mirror S4GAMicroAGLControl/App/Theme.swift so the portal and the iOS app
   stay visually identical. */

@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Surfaces */
  --bg: #0b0f14;
  --bg-2: #0f1620;
  --card: #101824;
  --key: #263344;

  /* Text */
  --text: #e6edf7;
  --muted: #a9b5c7;

  /* Accents */
  --yellow: #ffcb08;
  --green: #4ade80;
  --toggle-green: #26a65b;
  --phosphor: #39ff88;
  --blue: #3b82f6;
  --red: #f87171;

  /* Lines */
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.16);
  --outline: rgba(169, 181, 199, 0.35);
  --scrim: rgba(0, 0, 0, 0.45);

  /* Radii */
  --r-sm: 8px;
  --r-md: 9px;
  --r-key: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 18px;

  /* Shadows */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-key: 0 4px 8px rgba(0, 0, 0, 0.3);

  /* Type scale */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 26px;

  --font: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Components set their own display, which would otherwise beat the browser's
   [hidden] rule, so make hidden win everywhere. */
[hidden] {
  display: none !important;
}

/* Changing numeric values use tabular digits everywhere. */
.tabular {
  font-variant-numeric: tabular-nums;
}