/* Design tokens. Dark is the default theme; light comes from the system preference
   or from the visitor's saved choice (data-theme on <html>). Palette "Noite & Menta". */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/sora-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* brand */
  --noite: #0D1030;
  --cobalto: #2F5FB0;
  --cobalto-claro: #7FA3E6;
  --menta: #6EE7C8;
  --menta-logo: #5FD3B5;
  --nevoa: #EEF0FF;
  --menta-hover: #9AEED8;
  --logo-stem-light: #E8F3F1;

  /* type, shape, motion */
  --font: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius-btn: 999px;
  --radius-field: 12px;
  --radius-card: 24px;
  --header-h: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .7, .2, 1);

  /* dark theme (default) */
  --bg: #080A1F;
  --surface: #11153A;
  --sunk: #0B0E2A;
  --fg: #EEF0FF;
  --muted: #A3A9C9;
  --line: #262B55;
  --primary: var(--menta);
  --primary-h: var(--menta-hover);
  --on-primary: var(--noite);
  --accent: var(--menta);
  --ok: var(--menta);
  --ok-bg: rgba(110, 231, 200, .14);
  --stem: var(--logo-stem-light);
  --danger: #FF8A8F;
  --focus: var(--menta);
  --chip: var(--menta);
  --chip-fg: var(--noite);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 20px 40px -20px rgba(0, 0, 0, .6);
  --shine-1: var(--menta);
  --shine-2: var(--cobalto-claro);
  --aurora-opacity: .38;
  --glass: rgba(238, 240, 255, .06);
  --glass-line: rgba(238, 240, 255, .16);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F7F7FC;
    --surface: #FFFFFF;
    --sunk: var(--nevoa);
    --fg: var(--noite);
    --muted: #4B5275;
    --line: #DCDFF0;
    --primary: var(--cobalto);
    --primary-h: #274D91;
    --on-primary: #FFFFFF;
    --accent: #0B6E5B;
    --ok: #0B6E5B;
    --ok-bg: #D3F8EE;
    --stem: #0B2B3A;
    --danger: #C42B36;
    --focus: var(--cobalto);
    --chip: var(--noite);
    --chip-fg: #F7F7FC;
    --shadow: 0 1px 2px rgba(13, 16, 48, .05), 0 16px 40px -20px rgba(13, 16, 48, .2);
    --shine-1: var(--cobalto);
    --shine-2: #0B6E5B;
    --aurora-opacity: .35;
    --glass: rgba(255, 255, 255, .5);
    --glass-line: rgba(255, 255, 255, .8);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #F7F7FC;
  --surface: #FFFFFF;
  --sunk: var(--nevoa);
  --fg: var(--noite);
  --muted: #4B5275;
  --line: #DCDFF0;
  --primary: var(--cobalto);
  --primary-h: #274D91;
  --on-primary: #FFFFFF;
  --accent: #0B6E5B;
  --ok: #0B6E5B;
  --ok-bg: #D3F8EE;
  --stem: #0B2B3A;
  --danger: #C42B36;
  --focus: var(--cobalto);
  --chip: var(--noite);
  --chip-fg: #F7F7FC;
  --shadow: 0 1px 2px rgba(13, 16, 48, .05), 0 16px 40px -20px rgba(13, 16, 48, .2);
  --shine-1: var(--cobalto);
  --shine-2: #0B6E5B;
  --aurora-opacity: .35;
  --glass: rgba(255, 255, 255, .5);
  --glass-line: rgba(255, 255, 255, .8);
  color-scheme: light;
}