/* nobox brand tokens for the kiosk console and launcher.
 * Source: https://brand-book.nobox.pt/ (Manual de identidade, edição 2026 v1.0).
 * Values are copied verbatim from the brand book; only the system aliases at
 * the bottom are ours.
 *
 * Rules that matter for UI:
 *   - colour is flat: no gradients, no shadows, no blur;
 *   - navy is the brand's black, including text;
 *   - forbidden pairings: red with blue, yellow with turquoise (either way);
 *     white or grey on any tint 3; any tint 3 on white or grey;
 *   - turquoise = success, red = error (system convention);
 *   - square corners on blocks, cards, inputs; fully round buttons and dots.
 */

/* Brand fonts are commercial (Tiempos Headline, Akkurat). Put the licensed
   files from the brand Drive in brand/fonts/ to use them; until then the
   fallbacks below apply. */
@font-face { font-family: "Akkurat"; src: url("fonts/Akkurat-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("fonts/TiemposHeadline-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("fonts/TiemposHeadline-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* 5 primaries */
  --nobox-red: #FF5F40;
  --nobox-yellow: #E2B939;
  --nobox-turquoise: #00C6D4;
  --nobox-blue: #2E8BE8;
  --nobox-navy: #101C38;

  /* tints: 1 darkest, 3 lightest (tint 3 never on white or grey) */
  --nobox-red-1: #FF907C;
  --nobox-red-2: #FFB0A1;
  --nobox-red-3: #FFE0DA;
  --nobox-yellow-1: #EFD689;
  --nobox-yellow-2: #F4E2AC;
  --nobox-yellow-3: #FAF5DE;
  --nobox-turquoise-1: #71D7E1;
  --nobox-turquoise-2: #9DE2EA;
  --nobox-turquoise-3: #D9F4F7;
  --nobox-blue-1: #73AEEE;
  --nobox-blue-2: #9CC5F4;
  --nobox-blue-3: #D7E8FA;
  --nobox-navy-1: #565F74;
  --nobox-navy-2: #878D9C;
  --nobox-navy-3: #D1D2D7;

  /* neutrals */
  --nobox-white: #FFFFFF;
  --nobox-gray: #EFEFEF;

  /* type */
  --font-display: "Tiempos Headline", Georgia, "Noto Serif", serif;
  --font-sans: "Akkurat", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --text-display-2: clamp(2.5rem, 4.4vw, 3.75rem);
  --text-display-3: 2.5rem;
  --text-display-4: 1.75rem;
  --text-lead: 1.375rem;
  --text-body: 1.0625rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.75rem;
  --leading-display: 1.2;
  --leading-snug: 1.3;
  --leading-body: 1.45;

  /* space (8px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* shape and motion */
  --radius-none: 0;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);

  /* semantic (light surfaces) */
  --text-primary: var(--nobox-navy);
  --text-secondary: var(--nobox-navy-1);
  --surface-page: var(--nobox-white);
  --surface-muted: var(--nobox-gray);
  --border-hairline: var(--nobox-navy-3);
  --border-strong: var(--nobox-navy);
  --link: var(--nobox-blue);
  --focus-ring: var(--nobox-blue);

  /* system states (ours): navy text on tint 2 chips, never tint 3 on white */
  --state-ok: var(--nobox-turquoise);
  --state-ok-bg: var(--nobox-turquoise-2);
  --state-error: var(--nobox-red);
  --state-error-bg: var(--nobox-red-2);
  --state-warn: var(--nobox-yellow);
  --state-warn-bg: var(--nobox-yellow-2);
  --state-idle-bg: var(--nobox-gray);
}

/* Statement scope: navy background flips text colours. */
.nobox-on-navy {
  --text-primary: var(--nobox-white);
  --text-secondary: var(--nobox-navy-3);
  --border-hairline: var(--nobox-navy-1);
  --border-strong: var(--nobox-white);
  --link: var(--nobox-turquoise-1);
  color: var(--text-primary);
  background: var(--nobox-navy);
}