/* Design tokens — sampled from the approved two-screen mockup (design/asset-sheets/hub/hub-master-reference.webp). */

@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url("../../assets/fonts/roboto-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 900; font-display: swap; src: url("../../assets/fonts/roboto-900.woff2") format("woff2"); }
/* Pixel display font (OFL 1.1, Pixelify Sans via Fontsource 5.3.0) for section headers. */
@font-face { font-family: "Pixelify Sans"; font-weight: 700; font-display: swap; src: url("../../assets/fonts/pixelify-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 400; font-display: swap; src: url("../../assets/fonts/roboto-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 500; font-display: swap; src: url("../../assets/fonts/roboto-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 600; font-display: swap; src: url("../../assets/fonts/roboto-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 700; font-display: swap; src: url("../../assets/fonts/roboto-condensed-700.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-app: #010811;
  --bg-app-top: #04101f;
  --bg-surface: #07121f;          /* profile card, friend rows */
  --bg-field: #0b1727;            /* search fields, inactive pills */
  --bg-nav: #040b16;
  --bg-overlay: rgba(1, 6, 14, 0.72);

  /* Lines */
  --border: #1a2a42;
  --border-strong: #273d60;
  --divider: #16243a;

  /* Text */
  --text: #ffffff;
  --text-secondary: #a9b5cc;
  --text-muted: #7f8daa;
  --text-placeholder: #8a97b2;

  /* Accent */
  --accent: #0a84ff;
  --accent-strong: #0866ec;
  --accent-bright: #2aa8ff;       /* active nav label */
  --accent-gradient: linear-gradient(180deg, #1273e6 0%, #0a5fd8 100%);   /* white text ≥ 4.5:1 across the gradient */
  --accent-glow: 0 0 14px rgba(20, 140, 255, 0.35);

  /* Status */
  --online: #22d65a;
  --online-text: #3fdc6b;
  --offline: #7886b4;
  --pending: #ffa31a;
  --danger: #ff4d5e;
  --notify: #ff5a1f;
  --coin: #ffc93c;                 /* coin icon and amounts */
  --tier-bronze: #d08a4e;
  --tier-silver: #c9d3e1;
  --tier-gold: #ffcc33;
  --tier-platinum: #7fe3f0;
  --tier-legendary: #c77dff;

  /* Icons */
  --icon-inactive: #9aa7c7;
  --icon-cutout: #050c18;

  /* Type */
  --font-display: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Pixelify Sans", var(--font-display);
  --font-ui: "Roboto Condensed", "Arial Narrow", system-ui, -apple-system, sans-serif;
  --fs-title: 2.125rem;     /* 34px  screen headings */
  --fs-section: 1.1875rem;  /* 19px  "Online (3)" */
  --fs-name: 1.125rem;      /* 18px  friend / profile names */
  --fs-body: 1rem;          /* 16px  inputs, pills */
  --fs-small: 0.875rem;     /* 14px  secondary text */
  --fs-tiny: 0.8125rem;     /* 13px  nav labels, status */

  /* Spacing & shape */
  --gutter: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Controls */
  --field-height: 44px;
  --pill-height: 36px;
  --touch-min: 44px;
  --nav-height: 72px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-max-width: 480px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}
:root[data-reduce-motion="true"] { --dur-fast: 0ms; --dur: 0ms; }