/*
 * Design tokens of the web app = the Android "Premium Dark" system (app/src/main/res/values/colors.xml,
 * dimens.xml, styles.xml). Change a value in Android first, then here. Never write colors in components:
 * use these variables.
 */
@font-face { font-family: "Onest"; src: url("../fonts/onest_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest_semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* Colors */
  --color-background: #080C14;
  --color-background-top: #0D1833;
  --color-background-bottom: #080B12;
  --color-surface: #121827;
  --color-surface-secondary: #192134;
  --color-surface-pressed: #252D42;
  --color-field: #171B27;
  --color-glass: rgba(18, 24, 39, 0.90);
  --color-glass-strong: rgba(25, 33, 52, 0.95);
  --color-glass-tag: rgba(37, 45, 66, 0.85);
  --color-glass-line: #2B3650;
  --color-glass-bar: rgba(16, 21, 34, 0.92);
  --color-border-strong: #34415D;
  --color-divider: #222B3D;
  --color-accent: #FF3156;
  --color-accent-pressed: #E8244A;
  --color-on-accent: #FFFFFF;
  --color-disabled-surface: #252B39;
  --color-focus: #8197FF;
  --color-gold: #F3B74D;
  --color-gold-soft: rgba(243, 183, 77, 0.20);
  --color-success: #36C9AC;
  --color-danger: #FF7891;
  --color-primary-blue: #222D54;
  --color-text-primary: #F5F6FA;
  --color-text-secondary: #A9B3CA;
  --color-text-hint: #8D98B2;
  --color-text-disabled: #79839A;
  --color-text-on-light: #080C14;
  --color-tab-inactive: #98A5C3;
  --color-center-tab: rgba(129, 151, 255, 0.12);
  --color-center-tab-selected: rgba(129, 151, 255, 0.24);
  --color-notification-dot: #FF3156;
  /* Directions (date tiles, labels) */
  --color-direction-olympiads: #8197FF;
  --color-direction-robotics: #5CC8B0;
  --color-direction-education: #E3A07E;
  --color-direction-other: #A9B3CA;

  /* Sign-in orbit (color_auth_*) */
  --color-auth-deep-blue: #10265F;
  --color-auth-blue: #3478FF;
  --color-auth-cyan: #59C8FF;
  --color-auth-pink: #FF6489;
  --color-auth-orbit-warm: #FF9D58;
  --color-auth-sphere-highlight: #2355A2;
  --color-auth-sphere-shadow: #070E2C;
  --color-orb-highlight: #C9D3FF;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 16px;
  --spacing-xl: 24px;
  --screen-padding: 16px;

  /* Radius */
  --radius-small: 12px;
  --radius-button: 14px;
  --radius-search: 14px;
  --radius-card: 18px;
  --radius-banner: 22px;
  --radius-dialog: 20px;
  --radius-label: 8px;
  --radius-pill: 100px;

  /* Text (sp -> px, the browser text zoom still applies) */
  --text-headline: 26px;
  --text-section-title: 20px;
  --text-card-title: 17px;
  --text-body: 15px;
  --text-caption: 13px;
  --text-overline: 12px;
  --text-tab-label: 12px;

  /* Sizes */
  --touch-target: 48px;
  --floating-bar-space: 108px;
  --content-max-width: 600px; /* phones first; on a wide screen the app stays a centered column */

  /* Motion (res/values/integers.xml) */
  --motion-press: 120ms;
  --motion-tab: 200ms;
  --motion-dialog: 220ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-press: 0ms; --motion-tab: 0ms; --motion-dialog: 0ms; }
}