@font-face {
  font-family: "Rubik";
  src: url("../assets/fonts/Rubik-Variable.woff2") format("woff2"),
       url("../assets/fonts/Rubik-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2"),
       url("../assets/fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
.ares-app {
  --ares-brand-navy: #0A2942;
  --ares-brand-teal: #2A9D8F;
  --ares-brand-deep: #071C2E;
  --ares-brand-teal-dark: #17695F;
  --ares-brand-teal-light: #68C9BE;
  --ares-white: #FFFFFF;
  --ares-font-display: "Rubik", "Inter", system-ui, sans-serif;
  --ares-font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --ares-control-compact: 32px;
  --ares-control-standard: 40px;
  --ares-control-comfortable: 44px;
  --ares-control-touch: 48px;
  --ares-radius-sm: 6px;
  --ares-radius-md: 8px;
  --ares-radius-lg: 12px;
  --ares-radius-xl: 16px;
  --ares-radius-pill: 9999px;
  --stroke-hairline: 1px;
  --stroke-border: 1.5px;
  --stroke-active: 2px;
  --stroke-object: 2.5px;
  --ares-focus-width: 2px;
  --ares-focus-offset: 2px;
  --e-font-name: var(--ares-font-ui);
  font-family: var(--ares-font-ui);
  font-variant-numeric: lining-nums tabular-nums;
}

:root,
:root[data-theme="light"],
.ares-app[data-theme="light"] {
  --ares-bg: #F6F9FB;
  --ares-surface: #FFFFFF;
  --ares-surface-2: #EEF3F6;
  --ares-text: #10232E;
  --ares-text-muted: #526A77;
  --ares-border: #D5E0E6;
  --ares-control-border: #768F9D;
  --ares-action-primary: #0A2942;
  --ares-action-primary-hover: #071C2E;
  --ares-on-action-primary: #FFFFFF;
  --ares-on-danger: #FFFFFF;
  --ares-link: #17695F;
  --ares-accent-text: #17695F;
  --ares-data-primary: #0A2942;
  --ares-focus: #2A9D8F;
  --ares-success: #237A57;
  --ares-warning: #A95B00;
  --ares-danger: #C43D4B;
  --ares-info: #176B93;
  --ares-danger-surface: #FFF7F8;
  --ares-warning-surface: #FFF7ED;
  --ares-info-surface: #EEF8FC;
  --station-slate-start: color-mix(in srgb, var(--ares-data-primary) 52%, var(--ares-surface));
  --station-slate-end: color-mix(in srgb, var(--ares-data-primary) 72%, var(--ares-bg));
  --station-display-surface: linear-gradient(135deg, var(--station-slate-start), var(--station-slate-end));
  --station-object-outline: var(--ares-focus);
  --station-on-slate: #FFFFFF;
  --station-on-slate-muted: rgb(255 255 255 / 76%);
  --station-on-slate-subtle: rgb(255 255 255 / 60%);
  --ares-topbar-bg: #FFFFFF;
  --ares-logo-horizontal: url("/assets/logos/svg/modo-claro/ares-horizontal.svg?v=4997c346c8d8");
  --ares-shadow-1: 0 1px 4px rgb(10 41 66 / 8%);
  --ares-shadow-2: 0 8px 24px rgb(10 41 66 / 14%);
  --ares-shadow-3: 0 18px 44px rgb(7 28 46 / 20%);
}

:root[data-theme="dark"],
.ares-app[data-theme="dark"] {
  --ares-bg: #07141D;
  --ares-surface: #0D2636;
  --ares-surface-2: #123346;
  --ares-text: #F6FAFC;
  --ares-text-muted: #B5C4CD;
  --ares-border: #315266;
  --ares-control-border: #527386;
  --ares-action-primary: #68C9BE;
  --ares-action-primary-hover: #8AD7CE;
  --ares-on-action-primary: #0A2942;
  --ares-on-danger: #071C2E;
  --ares-link: #68C9BE;
  --ares-accent-text: #68C9BE;
  --ares-data-primary: #68C9BE;
  --ares-focus: #68C9BE;
  --ares-success: #70D7A7;
  --ares-warning: #FFB86B;
  --ares-danger: #FF9AA6;
  --ares-info: #79C5E8;
  --ares-danger-surface: #321C25;
  --ares-warning-surface: #332618;
  --ares-info-surface: #102E3C;
  --station-slate-start: color-mix(in srgb, var(--ares-data-primary) 52%, var(--ares-surface));
  --station-slate-end: color-mix(in srgb, var(--ares-data-primary) 72%, var(--ares-bg));
  --station-display-surface: linear-gradient(135deg, var(--ares-surface-2), var(--ares-surface));
  --station-object-outline: var(--ares-focus);
  --station-on-slate: #FFFFFF;
  --station-on-slate-muted: rgb(255 255 255 / 76%);
  --station-on-slate-subtle: rgb(255 255 255 / 60%);
  --ares-topbar-bg: #0D2636;
  --ares-logo-horizontal: url("/assets/logos/svg/modo-oscuro/ares-horizontal.svg?v=2849abd1a8b8");
  --ares-shadow-1: 0 1px 4px rgb(0 0 0 / 14%);
  --ares-shadow-2: 0 8px 24px rgb(0 0 0 / 18%);
  --ares-shadow-3: 0 18px 44px rgb(0 0 0 / 24%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ares-bg: #07141D;
    --ares-surface: #0D2636;
    --ares-surface-2: #123346;
    --ares-text: #F6FAFC;
    --ares-text-muted: #B5C4CD;
    --ares-border: #315266;
    --ares-control-border: #527386;
    --ares-action-primary: #68C9BE;
    --ares-action-primary-hover: #8AD7CE;
    --ares-on-action-primary: #0A2942;
    --ares-on-danger: #071C2E;
    --ares-link: #68C9BE;
    --ares-accent-text: #68C9BE;
    --ares-data-primary: #68C9BE;
    --ares-focus: #68C9BE;
    --ares-success: #70D7A7;
    --ares-warning: #FFB86B;
    --ares-danger: #FF9AA6;
    --ares-info: #79C5E8;
    --ares-danger-surface: #321C25;
    --ares-warning-surface: #332618;
    --ares-info-surface: #102E3C;
    --station-slate-start: color-mix(in srgb, var(--ares-data-primary) 52%, var(--ares-surface));
    --station-slate-end: color-mix(in srgb, var(--ares-data-primary) 72%, var(--ares-bg));
    --station-display-surface: linear-gradient(135deg, var(--ares-surface-2), var(--ares-surface));
    --station-object-outline: var(--ares-focus);
    --station-on-slate: #FFFFFF;
    --station-on-slate-muted: rgb(255 255 255 / 76%);
    --station-on-slate-subtle: rgb(255 255 255 / 60%);
    --ares-topbar-bg: #0D2636;
    --ares-logo-horizontal: url("/assets/logos/svg/modo-oscuro/ares-horizontal.svg?v=2849abd1a8b8");
    --ares-shadow-1: 0 1px 4px rgb(0 0 0 / 14%);
    --ares-shadow-2: 0 8px 24px rgb(0 0 0 / 18%);
    --ares-shadow-3: 0 18px 44px rgb(0 0 0 / 24%);
  }

}

.ares-app :focus-visible {
  outline: var(--ares-focus-width) solid var(--ares-focus);
  outline-offset: var(--ares-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .ares-app *, .ares-app *::before, .ares-app *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
