/* Portal Bebras: design tokens.

   Two layers, as in bebras-design/orange-proposals/portal-v1:
   1. brand palette (bebras-design/system/tokens/colours.css), used for
      identity geometry only;
   2. role tokens for the one shipped skin, Órbita. Components in
      components.css use role tokens only, never raw colours.

   Contrast: white on Brandeis Blue #0070FF is 4.41:1, below WCAG AA for
   small text, so surfaces and buttons that carry text use #0062E0 (5.49:1).
   Brandeis stays for large type and shapes. scripts/check_contrast.py checks
   every text/background role pair below and fails on any text token that no
   pair covers.

   Font: the brand face is Brockmann, but its webfont licence covers one
   website and has not been checked for the portal. Until it is, the portal
   uses the brand's fallback, Lato (SIL OFL, self-hosted in static/fonts). */

:root {
  /* brand palette */
  --bebras-sunset: #F2CC8F;
  --bebras-melon: #FFB4A2;
  --bebras-apricot: #FFCDB2;
  --bebras-alabaster: #DBDED4;
  --bebras-pacific-cyan: #00B4D8;
  --bebras-brandeis-blue: #0070FF;
  --bebras-marian-blue: #023E8A;
  --bebras-violet: #462749;
  --bebras-folly: #FF005F;
  --bebras-chocolate: #520B23;
  --bebras-rich-black: #0D1821;

  --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* status */
  --ok-soft: #DDF5FA; --ok-ink: #00697F;
  --warn-soft: #FBF0DC; --warn-ink: #7A5200;
  --bad-soft: #FFE3EC; --bad-ink: #C2004A;
}

/* Órbita: blue rail and hero, floating rounded modules */
:root, [data-skin="orbita"] {
  --font-display: var(--font); --display-weight: 700; --title-size: 38px; --title-track: -0.02em; --hero-size: 32px;
  --bg: #EDF2FA; --surface: #FFFFFF; --surface-2: #F2F6FC; --line: #DCE5F2; --line-strong: #C3D1E6;
  --ink: #10254A; --ink-2: #3A4D6D; --ink-3: #55657F; --input-bg: #FFFFFF; --th-bg: #F6F9FD;
  --accent: #0062E0; --accent-hover: #0055C4; --accent-ink: #FFFFFF; --accent-soft: #DBEAFF; --link: #0058CC; --kicker: #0058CC; --done: #0062E0;
  --r-card: 20px; --r-control: 10px; --r-btn: 10px; --r-nav: 12px; --r-tag: 999px; --r-avatar: 10px; --r-hero: 24px;
  --card-border: 0; --card-shadow: 0 6px 24px rgba(23, 60, 118, .08); --btn-shadow: none; --btn-lift: translateY(-1px);
  --sb-bg: #0062E0; --sb-ink: #FFFFFF; --sb-ink-2: #E3EEFF; --sb-label: #E3EEFF; --sb-hover: rgba(255, 255, 255, .14);
  --sb-active-bg: #FFFFFF; --sb-active-ink: #0052BD; --sb-active-shadow: 0 6px 16px rgba(0, 60, 140, .35); --sb-border: 0; --sb-logo: #FFFFFF;
  --sb-school-bg: rgba(255, 255, 255, .1); --sb-school-border: 1px solid rgba(255, 255, 255, .28); --sb-avatar-bg: #FFFFFF; --sb-avatar-ink: #0052BD;
  --sb-rule: rgba(255, 255, 255, .3); --badge-bg: #D6004F; --badge-ink: #FFFFFF;
  --top-bg: rgba(237, 242, 250, .9); --top-border: 1px solid #DCE5F2;
  --hero-bg: #0062E0; --hero-ink: #FFFFFF; --hero-ink-2: #E8F1FF; --hero-kicker: #E3EEFF; --hero-border: 0; --hero-count: #FFCDB2;
  --hero-btn-bg: #FFFFFF; --hero-btn-ink: #0052BD; --hero-line: rgba(255, 255, 255, .6);
  --tile-a: #FFCDB2; --tile-b: #00B4D8; --tile-c: #F2CC8F; --tiles-w: 220px;
  --info-soft: #DBEAFF; --info-ink: #0052BD; --neutral-soft: #EEF3FA;
  --tip-bg: #0D1821; --tip-ink: #FFFFFF;
}

/* Painel (after Green): dark rail, neutral canvas, white cards. Any token not
   set here falls back to the Órbita values above, which also sit on :root. */
[data-skin="painel"] {
  --font-display: var(--font); --display-weight: 700; --title-size: 30px; --title-track: -0.015em; --hero-size: 28px;
  --bg: #F4F6F3; --surface: #FFFFFF; --surface-2: #F6F7F5; --line: #E4E7E3; --line-strong: #CDD2CC;
  --ink: #0D1821; --ink-2: #465058; --ink-3: #5B656C; --input-bg: #FFFFFF; --th-bg: #FAFBF9;
  --accent: #0062E0; --accent-hover: #0055C4; --accent-ink: #FFFFFF; --accent-soft: #E5F0FF; --link: #0058CC; --kicker: #0058CC; --done: #0062E0;
  --r-card: 12px; --r-control: 8px; --r-btn: 8px; --r-nav: 8px; --r-tag: 999px; --r-avatar: 50%; --r-hero: 12px;
  --card-border: 1px solid #E4E7E3; --card-shadow: 0 1px 2px rgba(13, 24, 33, .05); --btn-shadow: 0 1px 2px rgba(0, 98, 224, .3); --btn-lift: none;
  --sb-bg: #0D1821; --sb-ink: #D5DADF; --sb-ink-2: #A3ACB5; --sb-label: #8D97A1; --sb-hover: rgba(255, 255, 255, .07);
  --sb-active-bg: #0062E0; --sb-active-ink: #FFFFFF; --sb-active-shadow: none; --sb-border: 0; --sb-logo: #FFFFFF;
  --sb-school-bg: #16232E; --sb-school-border: 0; --sb-avatar-bg: #0062E0; --sb-avatar-ink: #FFFFFF;
  --sb-rule: #1F2C37; --badge-bg: #D6004F; --badge-ink: #FFFFFF;
  --top-bg: rgba(244, 246, 243, .9); --top-border: 1px solid #E4E7E3;
  --hero-bg: #FFFFFF; --hero-ink: #0D1821; --hero-ink-2: #465058; --hero-kicker: #0058CC; --hero-border: 1px solid #E4E7E3; --hero-count: #0058CC;
  --hero-btn-bg: #0062E0; --hero-btn-ink: #FFFFFF; --hero-line: #CDD2CC;
  --tile-a: #0070FF; --tile-b: #00B4D8; --tile-c: #023E8A; --tiles-w: 170px;
  --info-soft: #E5F0FF; --info-ink: #0052BD; --neutral-soft: #EEF0EC;
  --tip-bg: #0D1821; --tip-ink: #FFFFFF;
}