/* ============================================================
   NETSPEED — TOKENS MATERIAL DESIGN 3
   Gerado com @material/material-color-utilities (algoritmo oficial
   do Google) a partir do azul do logo Netspeed.

     semente ....... #3a609e
     matiz ......... 263.8°
     croma ......... 42.2
     tom ........... 40.8
     variante ...... Vibrant

   NÃO edite as cores à mão. Para mudar a identidade, altere a
   semente e regere. Cada valor abaixo é matematicamente derivado
   e tem contraste garantido com o seu par "on-".
   ============================================================ */

:root {
  --md-primary: #005cbb;
  --md-on-primary: #ffffff;
  --md-primary-container: #d7e3ff;
  --md-on-primary-container: #00458f;
  --md-inverse-primary: #abc7ff;
  --md-secondary: #575c7e;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #dee0ff;
  --md-on-secondary-container: #404565;
  --md-tertiary: #605889;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #e6deff;
  --md-on-tertiary-container: #484070;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #93000a;
  --md-background: #f9f9ff;
  --md-on-background: #171c25;
  --md-surface: #f9f9ff;
  --md-on-surface: #171c25;
  --md-surface-variant: #dde2f2;
  --md-on-surface-variant: #414753;
  --md-surface-dim: #d6dae6;
  --md-surface-bright: #f9f9ff;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f1f3ff;
  --md-surface-container: #eaedfa;
  --md-surface-container-high: #e5e8f5;
  --md-surface-container-highest: #dfe2ef;
  --md-inverse-surface: #2c303a;
  --md-inverse-on-surface: #edf0fd;
  --md-outline: #717785;
  --md-outline-variant: #c1c6d6;
  --md-scrim: #000000;
  --md-shadow: #000000;

  --md-primary-0: #000000;
  --md-primary-10: #001b3f;
  --md-primary-20: #002f65;
  --md-primary-30: #00458f;
  --md-primary-40: #005cbb;
  --md-primary-50: #0074e8;
  --md-primary-60: #438fff;
  --md-primary-70: #7cabff;
  --md-primary-80: #abc7ff;
  --md-primary-90: #d7e3ff;
  --md-primary-95: #ecf0ff;
  --md-primary-99: #fdfbff;
  --md-primary-100: #ffffff;

  /* ---------- Escala tipográfica ---------- */
  --md-font: "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --md-display-large: 3.5625rem/1.12 var(--md-font);
  --md-display-medium: 2.8125rem/1.16 var(--md-font);
  --md-display-small: 2.25rem/1.22 var(--md-font);
  --md-headline-large: 2rem/1.25 var(--md-font);
  --md-headline-medium: 1.75rem/1.29 var(--md-font);
  --md-headline-small: 1.5rem/1.33 var(--md-font);
  --md-title-large: 1.375rem/1.27 var(--md-font);
  --md-title-medium: 1rem/1.5 var(--md-font);
  --md-title-small: 0.875rem/1.43 var(--md-font);
  --md-body-large: 1rem/1.5 var(--md-font);
  --md-body-medium: 0.875rem/1.43 var(--md-font);
  --md-body-small: 0.75rem/1.33 var(--md-font);
  --md-label-large: 0.875rem/1.43 var(--md-font);
  --md-label-medium: 0.75rem/1.33 var(--md-font);
  --md-label-small: 0.6875rem/1.45 var(--md-font);

  /* ---------- Escala de formas ---------- */
  --md-shape-none: 0;
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  /* ---------- Espaçamento ---------- */
  --md-space-1: 4px;
  --md-space-2: 8px;
  --md-space-3: 12px;
  --md-space-4: 16px;
  --md-space-5: 24px;
  --md-space-6: 32px;
  --md-space-7: 48px;

  /* ---------- Camadas de estado ---------- */
  --md-state-hover: 0.08;
  --md-state-focus: 0.10;
  --md-state-pressed: 0.10;
  --md-state-dragged: 0.16;

  /* ---------- Elevação ---------- */
  --md-elev-0: none;
  --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);

  /* ---------- Movimento (M3 Expressive: mola, não ease) ---------- */
  --md-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --md-dur-short: 150ms;
  --md-dur-medium: 300ms;
  --md-dur-long: 450ms;
  --md-dur-xlong: 600ms;
}

html[data-theme="dark"] {
  --md-primary: #abc7ff;
  --md-on-primary: #002f65;
  --md-primary-container: #00458f;
  --md-on-primary-container: #d7e3ff;
  --md-inverse-primary: #005cbb;
  --md-secondary: #c0c4eb;
  --md-on-secondary: #292e4d;
  --md-secondary-container: #404565;
  --md-on-secondary-container: #dee0ff;
  --md-tertiary: #cabff8;
  --md-on-tertiary: #312a58;
  --md-tertiary-container: #484070;
  --md-on-tertiary-container: #e6deff;
  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;
  --md-background: #0f131c;
  --md-on-background: #dfe2ef;
  --md-surface: #0f131c;
  --md-on-surface: #dfe2ef;
  --md-surface-variant: #414753;
  --md-on-surface-variant: #c1c6d6;
  --md-surface-dim: #0f131c;
  --md-surface-bright: #353943;
  --md-surface-container-lowest: #0a0e17;
  --md-surface-container-low: #171c25;
  --md-surface-container: #1b2029;
  --md-surface-container-high: #262a33;
  --md-surface-container-highest: #30353e;
  --md-inverse-surface: #dfe2ef;
  --md-inverse-on-surface: #2c303a;
  --md-outline: #8b919f;
  --md-outline-variant: #414753;
  --md-scrim: #000000;
  --md-shadow: #000000;

  --md-primary-0: #000000;
  --md-primary-10: #001b3f;
  --md-primary-20: #002f65;
  --md-primary-30: #00458f;
  --md-primary-40: #005cbb;
  --md-primary-50: #0074e8;
  --md-primary-60: #438fff;
  --md-primary-70: #7cabff;
  --md-primary-80: #abc7ff;
  --md-primary-90: #d7e3ff;
  --md-primary-95: #ecf0ff;
  --md-primary-99: #fdfbff;
  --md-primary-100: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --md-dur-short: 1ms;
    --md-dur-medium: 1ms;
    --md-dur-long: 1ms;
    --md-dur-xlong: 1ms;
    --md-ease-spring: linear;
  }
}