/*
  maia-design-system.css — porte do design system MAIA (MAUI) para o web.

  FONTE DE VERDADE: src/CopilotSpeaker.MAUI.DesignSystem/Resources/
    Tokens/Palette.xaml      -> --ds-palette-*   (paleta crua; NAO consumir em componente)
    Tokens/Typography.xaml   -> --ds-font-*
    Tokens/Dimensions.xaml   -> --ds-radius-* / --ds-space-* / --ds-size-* / --ds-stroke-*
    Themes/DarkTheme.xaml    -> tokens semanticos em :root e .dark-theme  (BASELINE APROVADO)
    Themes/LightTheme.xaml   -> tokens semanticos em .light-theme         (DERIVADO, provisorio)

  ⚠ CONVERSAO DE ALFA: MAUI escreve #AARRGGBB, CSS le #RRGGBBAA. Os dois ultimos pares
  TROCAM DE LUGAR. Copiar o hex do XAML literalmente para ca produz uma cor errada que
  continua "parecendo uma cor" — o erro passa despercebido. Todo valor abaixo JA esta
  convertido; ao trazer uma chave nova do XAML, mova o AA do inicio para o fim.

  ⚠ ESTE ARQUIVO SO DECLARA CUSTOM PROPERTIES E @font-face. Nenhum seletor de elemento,
  nenhuma regra que pinte a aplicacao. A identidade e aplicada componente a componente
  (CSS isolado), como o MAUI faz por pagina — folha global agressiva repintaria telas
  ainda nao migradas.

  Tamanhos em px de proposito: o prototipo "MAIA Mobile.dc.html" e a origem da escala e ja
  estava em px; o MAUI tambem manteve 1:1. Converter para rem aqui reescalaria o desenho
  aprovado.
*/

/* ===================================================================
   FONTES (self-hosted; woff2 vindos de src/CopilotSpeaker.Maia.Studio.Web/assets/fonts,
   licenca OFL ao lado de cada arquivo em wwwroot/fonts). Nao dependem de Google Fonts —
   o login precisa renderizar com a tipografia certa mesmo offline / com CDN bloqueada.

   ⚠ NAO escrever glob com estrela-barra ("fonts/<duas estrelas>/OFL.txt") dentro de comentario
   CSS: a barra depois das estrelas FECHA o comentario ali, e o texto restante vira lixo que o
   parser consome ate o proximo bloco — engolindo a regra seguinte inteira, sem erro no console.
   =================================================================== */
@font-face {
    font-family: 'Space Grotesk';
    /* ⚠ format('woff2') — NAO 'woff2-variations'. Esse format string foi removido do Chrome;
       um format desconhecido invalida o `src`, e com um src so o @font-face INTEIRO e
       descartado em silencio: a familia some da lista de faces e todo texto cai no fallback
       do sistema sem nenhum erro no console. O eixo variavel continua funcionando por
       `font-weight: 300 700`. */
    src: url('fonts/space-grotesk/SpaceGrotesk-Variable.woff2') format('woff2');
    font-weight: 300 700; /* face variavel cobre a faixa inteira num arquivo so */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===================================================================
   PALETA CRUA — Tokens/Palette.xaml
   Alimenta SO os tokens semanticos abaixo. Componente que ler --ds-palette-* direto
   perde a troca de tema (mesma regra do XAML).
   =================================================================== */
:root {
    --ds-palette-cyan-300: #5CE6FF;
    --ds-palette-cyan-500: #00D4FF;
    --ds-palette-cyan-700: #0088C4;
    --ds-palette-cyan-deep-500: #008CD2;

    --ds-palette-ink-900: #05070C;
    --ds-palette-ink-850: #070A10;
    --ds-palette-ink-800: #0A0E16;
    --ds-palette-ink-780: #0B0F18;
    --ds-palette-ink-760: #0B1018;
    --ds-palette-ink-600: #232C3D;

    --ds-palette-slate-050: #EAF6FF;
    --ds-palette-slate-075: #EAF1FB;
    --ds-palette-slate-100: #E3ECF7;
    --ds-palette-slate-200: #CFE0F2;
    --ds-palette-slate-300: #B9CBE0;
    --ds-palette-slate-400: #9FB2C9;
    --ds-palette-slate-500: #8092AB;
    --ds-palette-slate-550: #7D8AA0;
    --ds-palette-slate-600: #6F7F97;
    --ds-palette-slate-700: #586477;

    --ds-palette-green-500: #00DC82;
    --ds-palette-red-200: #FFA7B6;
    --ds-palette-red-300: #FF8098;
    --ds-palette-red-500: #FF5470;
    --ds-palette-amber-200: #FFD98A;
    --ds-palette-amber-500: #FFC24B;
    --ds-palette-orange-500: #FF8F4B;
    --ds-palette-violet-500: #7C5CFF;
    --ds-palette-black: #000000;

    /* hairline steel blue — origem de toda borda de card/sheet/campo */
    --ds-palette-steel: 120, 160, 210;
}

/* ===================================================================
   TIPOGRAFIA — Tokens/Typography.xaml (nao muda com o tema)
   =================================================================== */
:root {
    --ds-font-sans: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --ds-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --ds-font-weight-regular: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold: 700;

    /* escala sans */
    --ds-font-size-caption: 11px;
    --ds-font-size-caption-large: 11.5px;
    --ds-font-size-body-small: 12px;
    --ds-font-size-body-compact: 12.5px; /* o mais usado no prototipo */
    --ds-font-size-body: 13px;
    --ds-font-size-body-large: 13.5px;
    --ds-font-size-body-input: 14px;
    --ds-font-size-button-compact: 14.5px;
    --ds-font-size-button: 15px;
    --ds-font-size-title-small: 16px;
    --ds-font-size-title: 17px;
    --ds-font-size-title-large: 18px;
    --ds-font-size-headline-small: 19px;
    --ds-font-size-headline: 20px; /* "Acesse sua conta" */
    --ds-font-size-headline-large: 21px;
    --ds-font-size-display: 23px; /* wordmark MAIA no login */
    --ds-font-size-display-large: 30px;

    /* escala mono — sempre pequena e maiuscula: carimbo/rotulo, nunca corpo */
    --ds-font-size-mono-micro: 8px;
    --ds-font-size-mono-tiny: 8.5px;
    --ds-font-size-mono-small: 9px;
    --ds-font-size-mono-label: 9.5px; /* o mono mais usado */
    --ds-font-size-mono-base: 10px;
    --ds-font-size-mono-medium: 10.5px;
    --ds-font-size-mono-large: 11px;
    --ds-font-size-mono-body: 13px;

    --ds-line-height-tight: 1.2;
    --ds-line-height-snug: 1.45;
    --ds-line-height-normal: 1.5;
    --ds-line-height-relaxed: 1.6;

    --ds-tracking-tight: 0.2px;
    --ds-tracking-slight: 0.3px;
    --ds-tracking-normal: 0.5px;
    --ds-tracking-wide: 1px; /* rotulos mono */
    --ds-tracking-wider: 1.5px;
    --ds-tracking-widest: 2px;
    --ds-tracking-wordmark: 5px; /* so o wordmark "MAIA" */
}

/* ===================================================================
   DIMENSOES — Tokens/Dimensions.xaml (nao mudam com o tema)
   Cada raio existe porque um componente o usa; nao ha arredondamento "para escala bonita".
   =================================================================== */
:root {
    /* Altura da bottom-nav fixa. Vive aqui porque QUEM RESERVA (o layout) e QUEM PINTA (o
       Footer) sao arquivos diferentes, e CSS isolado nao consegue publicar variavel para o pai.
       Medida pelo teste de browser que compara os retangulos — se a barra crescer, o teste
       vermelha antes do usuario. */
    --ds-bottom-nav-height: 84px;

    --ds-radius-xs: 2px;
    --ds-radius-sm: 6px;
    --ds-radius-sm-plus: 7px;
    --ds-radius-md: 8px;
    --ds-radius-md-plus: 9px; /* botao de icone, chip */
    --ds-radius-lg: 10px;
    --ds-radius-lg-plus: 11px;
    --ds-radius-xl: 12px; /* campo, banner, card (o padrao) */
    --ds-radius-xl-plus: 13px; /* botao primario */
    --ds-radius-2xl: 14px;
    --ds-radius-2xl-plus: 15px;
    --ds-radius-3xl: 16px; /* card do painel, modal */
    --ds-radius-4xl: 18px;
    --ds-radius-5xl: 20px;
    --ds-radius-6xl: 24px; /* topo de bottom sheet */
    --ds-radius-pill: 999px;

    --ds-space-1: 4px;
    --ds-space-2: 6px;
    --ds-space-3: 8px;
    --ds-space-4: 9px;
    --ds-space-5: 10px;
    --ds-space-6: 12px;
    --ds-space-7: 14px;
    --ds-space-8: 16px;
    --ds-space-9: 18px;
    --ds-space-10: 20px;
    --ds-space-11: 22px;
    --ds-space-12: 26px;
    --ds-space-13: 30px;

    /* paddings recorrentes ja compostos */
    --ds-padding-field: 0 14px;
    --ds-padding-banner: 12px 13px;
    --ds-padding-button: 16px;
    --ds-padding-chip: 8px 11px;
    --ds-padding-card: 16px;
    --ds-padding-screen: 14px 26px 30px;

    --ds-size-icon-xs: 12px;
    --ds-size-icon-sm: 14px;
    --ds-size-icon-md: 16px;
    --ds-size-icon-lg: 18px;
    --ds-size-icon-xl: 20px;
    --ds-size-checkbox: 20px;
    --ds-size-icon-button: 38px; /* alvo de toque do olho/senha */
    --ds-size-logo-mark: 74px;
    --ds-size-logo-halo: 96px;

    --ds-stroke-hairline: 1px;
    --ds-stroke-thick: 1.5px; /* borda do checkbox */
}

/* ===================================================================
   TOKENS SEMANTICOS — DarkTheme.xaml
   BASELINE MAIA. `:root` recebe o escuro para que qualquer no fora de .page
   (portais, overlays, body) ja nasca com a identidade certa.
   =================================================================== */
:root,
.dark-theme {
    /* ---------- fundos ---------- */
    --ds-background: #05070C;
    --ds-surface: #070A10;
    --ds-surface-sunken: #080B1299;
    --ds-surface-sunken-soft: #080B1280;
    --ds-surface-sunken-faint: #080B1266;
    --ds-surface-elevated: #141B2AA8;
    --ds-surface-sheet: #0C101AFA;
    --ds-surface-modal: #101521FC;
    --ds-surface-row: #0A0E168A;
    --ds-scrim: #00000099;
    --ds-scrim-overlay: #03050AA8;
    --ds-scrim-modal: #03050AB8;
    --ds-toast-surface: #0C111BF5;

    /* ---------- bordas (hairline steel blue) ---------- */
    --ds-border-faint: #78A0D20F;
    --ds-border-subtle: #78A0D21A;
    --ds-border: #78A0D229;
    --ds-border-strong: #78A0D233;
    --ds-border-soft: #78A0D224;
    --ds-border-info-tile: #78A0D21F;
    --ds-border-inset: #78A0D217;
    --ds-border-handle: #96B4D759;
    --ds-border-focus: #00D4FF59;

    /* ---------- texto ---------- */
    --ds-text-bright: #EAF6FF;
    --ds-text-primary: #E3ECF7;
    --ds-text-secondary: #CFE0F2;
    --ds-text-tertiary: #B9CBE0;
    --ds-text-muted: #8092AB;
    --ds-text-dim: #6F7F97; /* rotulos mono maiusculos e placeholders */
    --ds-text-faint: #586477;
    --ds-text-strike: #7D8AA0;
    --ds-text-on-accent: #05070C; /* o ciano e claro: a contra-cor e a tinta */

    /* ---------- acento ---------- */
    --ds-accent: #00D4FF;
    --ds-accent-hover: #5CE6FF;
    --ds-accent-deep: #0088C4;
    --ds-accent-surface: #00D4FF14;
    --ds-accent-surface-strong: #00D4FF24;
    --ds-accent-surface-soft: #00D4FF0F;
    --ds-accent-border: #00D4FF3D;
    --ds-accent-border-strong: #00D4FF59;
    --ds-accent-border-soft: #00D4FF33;
    --ds-accent-border-faint: #00D4FF2E;
    --ds-accent-glow: #00D4FF66;
    --ds-accent-glow-soft: #00D4FF33;
    --ds-accent-track: #00D4FF4D;
    --ds-accent-vignette: #00D4FF1A;
    --ds-accent-transparent: #00D4FF00; /* termina degrade sem escurecer o meio */
    --ds-accent-shadow: #0078BE40;
    --ds-accent-button-gradient: linear-gradient(160deg, #00D4FF3D, #00D4FF1F);
    --ds-accent-button-soft-gradient: linear-gradient(160deg, #00D4FF38, #00D4FF1A);
    --ds-accent-button-text: #EAF6FF; /* fundo translucido, nao ciano solido */

    /* ---------- semaforo ---------- */
    --ds-success: #00DC82;
    --ds-success-pulse: #00DC8280;
    --ds-success-surface: #00DC821F;
    --ds-success-border: #00DC8266;

    --ds-danger: #FF5470;
    --ds-danger-text: #FFA7B6;
    --ds-danger-text-strong: #FF8098;
    --ds-danger-surface: #FF547012;
    --ds-danger-surface-faint: #FF54700D;
    --ds-danger-border: #FF547042;
    --ds-danger-border-strong: #FF547066;
    --ds-danger-border-faint: #FF547038;
    --ds-danger-button-surface: #FF547024;
    --ds-danger-button-border: #FF547066;
    --ds-danger-button-text: #FF8098; /* sobre o fundo tingido o vermelho puro vibra */

    --ds-warning: #FFC24B;
    --ds-warning-text: #FFD98A;
    --ds-warning-surface: #FFC24B12;
    --ds-warning-border: #FFC24B42;

    --ds-alert: #FF8F4B;
    --ds-info: #7C5CFF;

    /* ---------- status da API ---------- */
    --ds-status-online: #00DC82;
    --ds-status-online-surface: #00DC821A;
    --ds-status-online-border: #00DC823D;
    --ds-status-reconnecting: #FFC24B;
    --ds-status-reconnecting-surface: #FFC24B1A;
    --ds-status-reconnecting-border: #FFC24B42;
    --ds-status-offline: #FF5470;
    --ds-status-offline-surface: #FF547017;
    --ds-status-offline-border: #FF54703D;
    --ds-status-unknown: #586477;
    --ds-status-unknown-surface: transparent;
    --ds-status-unknown-border: #78A0D229;

    /* ---------- campos ---------- */
    --ds-field-border: #78A0D229;
    --ds-field-border-filled: #00D4FF4D;
    --ds-field-border-invalid: #FF547080;
    --ds-checkbox-border: #78A0D24D;

    /* ---------- desabilitado ---------- */
    --ds-disabled-surface: #78A0D214; /* steel, NAO tinta rebaixada */
    --ds-disabled-border: #78A0D224;
    --ds-disabled-text: #586477;

    /* ---------- superficies compostas ---------- */
    --ds-shadow: #000000A6;
    --ds-elevated-surface-gradient: linear-gradient(#141B2AB8, #0A0E169E);
    --ds-modal-gradient: linear-gradient(160deg, #141B2AFA, #0C101AFA);
    --ds-sheet-gradient: linear-gradient(#101521FC, #090C14FC);
    --ds-sheet-border: #78A0D22E;
    --ds-selected-surface: #00D4FF29;
    --ds-progress-track: #78A0D224;
    --ds-progress-gradient: linear-gradient(90deg, #0088C4, #00D4FF);

    /* ---------- skeleton ---------- */
    --ds-skeleton-accent-base: #00D4FF1A;
    --ds-skeleton-accent-highlight: #00D4FF33;
    --ds-skeleton-neutral-base: #78A0D214;
    --ds-skeleton-neutral-highlight: #78A0D229;

    /* ---------- marca ----------
       O SVG da marca tem a cor CHAPADA dentro do arquivo: CSS nao alcanca o preenchimento de
       um SVG carregado como imagem. Por isso a variante e um TOKEN — a marca branca some sobre
       fundo claro, e a azul some sobre fundo escuro. Trocar de tema troca o arquivo.
       Caminhos ABSOLUTOS (/images/...): url() dentro de custom property e resolvido contra a
       folha que CONSOME a variavel, nao contra a que a declara — com caminho relativo o token
       virava /_content/<RCL>/images/... quando usado no CSS isolado de um componente de
       biblioteca, e dava 404. Minusculas porque o wwwroot e servido em Linux (/Images != /images). */
    --ds-brand-mark: url('/images/logos/maia-logo.svg');
}

/* ===================================================================
   TOKENS SEMANTICOS — LightTheme.xaml
   ⚠ DERIVADO, NAO APROVADO. O prototipo MAIA e escuro e so escuro; nao existe tela clara
   para copiar. Estes valores existem para satisfazer o contrato "os dois temas publicam o
   mesmo conjunto de chaves". Ao chegar a versao clara do design, este bloco e substituido
   pelos valores reais — o escuro nao se toca.

   Metodo da derivacao (mesmo do XAML, para a proxima edicao ser consistente):
     · a rampa de tinta inverte;
     · o acento ESCURECE para #0088C4 — #00D4FF sobre branco reprova em contraste;
     · hairlines mantem o steel blue com alfa MAIOR (sobre claro, alfa baixo some);
     · gradientes translucidos viram SOLIDOS (sobre branco eles desapareceriam).
   =================================================================== */
.light-theme {
    --ds-background: #F4F8FC;
    --ds-surface: #FFFFFF;
    --ds-surface-sunken: #E8EFF799;
    --ds-surface-sunken-soft: #E8EFF780;
    --ds-surface-sunken-faint: #E8EFF766;
    --ds-surface-elevated: #FFFFFFF5;
    --ds-surface-sheet: #FFFFFFFA;
    --ds-surface-modal: #FFFFFFFC;
    --ds-surface-row: #EDF2F88A;
    --ds-scrim: #05070C59;
    --ds-scrim-overlay: #05070C66;
    --ds-scrim-modal: #05070C73;
    --ds-toast-surface: #101521F5;

    --ds-border-faint: #78A0D224;
    --ds-border-subtle: #78A0D238;
    --ds-border: #78A0D259;
    --ds-border-strong: #78A0D280;
    --ds-border-soft: #78A0D24D;
    --ds-border-info-tile: #78A0D238;
    --ds-border-inset: #78A0D22E;
    --ds-border-handle: #78A0D280;
    --ds-border-focus: #0088C499;

    --ds-text-bright: #05070C;
    --ds-text-primary: #0B1018;
    --ds-text-secondary: #232C3D;
    --ds-text-tertiary: #3B4759;
    --ds-text-muted: #586477;
    --ds-text-dim: #6F7F97;
    --ds-text-faint: #8092AB;
    --ds-text-strike: #586477;
    --ds-text-on-accent: #FFFFFF;

    --ds-accent: #0088C4;
    --ds-accent-hover: #00A6E8;
    --ds-accent-deep: #00648F;
    --ds-accent-surface: #0088C414;
    --ds-accent-surface-strong: #0088C424;
    --ds-accent-surface-soft: #0088C40F;
    --ds-accent-border: #00D4FF59;
    --ds-accent-border-strong: #0088C480;
    --ds-accent-border-soft: #0088C466;
    --ds-accent-border-faint: #0088C447;
    --ds-accent-glow: #0088C44D;
    --ds-accent-glow-soft: #0088C424;
    --ds-accent-track: #0088C43D;
    --ds-accent-vignette: #0088C414;
    --ds-accent-transparent: #0088C400;
    --ds-accent-shadow: #0078BE40;
    --ds-accent-button-gradient: linear-gradient(160deg, #0088C4, #00648F);
    --ds-accent-button-soft-gradient: linear-gradient(160deg, #00A6E8, #0088C4);
    --ds-accent-button-text: #FFFFFF;

    --ds-success: #00A862;
    --ds-success-pulse: #00A86280;
    --ds-success-surface: #00A8621F;
    --ds-success-border: #00A86266;

    --ds-danger: #D92244;
    --ds-danger-text: #A3172F;
    --ds-danger-text-strong: #C01C3A;
    --ds-danger-surface: #D9224414;
    --ds-danger-surface-faint: #D922440D;
    --ds-danger-border: #D922444D;
    --ds-danger-border-strong: #D9224480;
    --ds-danger-border-faint: #D9224438;
    --ds-danger-button-surface: #D9224424;
    --ds-danger-button-border: #D9224466;
    --ds-danger-button-text: #A3172F;

    --ds-warning: #B77400;
    --ds-warning-text: #8A5700;
    --ds-warning-surface: #B7740014;
    --ds-warning-border: #B774004D;

    --ds-alert: #D0631E;
    --ds-info: #5B3FD9;

    --ds-status-online: #00A862;
    --ds-status-online-surface: #00A8621A;
    --ds-status-online-border: #00A8624D;
    --ds-status-reconnecting: #B77400;
    --ds-status-reconnecting-surface: #B774001A;
    --ds-status-reconnecting-border: #B774004D;
    --ds-status-offline: #D92244;
    --ds-status-offline-surface: #D9224417;
    --ds-status-offline-border: #D922444D;
    --ds-status-unknown: #8092AB;
    --ds-status-unknown-surface: transparent;
    --ds-status-unknown-border: #78A0D259;

    --ds-field-border: #78A0D259;
    --ds-field-border-filled: #0088C480;
    --ds-field-border-invalid: #D9224499;
    --ds-checkbox-border: #78A0D280;

    --ds-disabled-surface: #78A0D224;
    --ds-disabled-border: #78A0D24D;
    --ds-disabled-text: #8092AB;

    --ds-shadow: #05070C33;
    --ds-elevated-surface-gradient: linear-gradient(#FFFFFF, #EDF2F8F0);
    --ds-modal-gradient: linear-gradient(160deg, #FFFFFFFA, #F4F8FCFA);
    --ds-sheet-gradient: linear-gradient(#FFFFFFFC, #F4F8FCFC);
    --ds-sheet-border: #78A0D259;
    --ds-selected-surface: #0088C429;
    --ds-progress-track: #78A0D238;
    --ds-progress-gradient: linear-gradient(90deg, #00648F, #0088C4);

    --ds-skeleton-accent-base: #0088C41A;
    --ds-skeleton-accent-highlight: #0088C433;
    --ds-skeleton-neutral-base: #78A0D229;
    --ds-skeleton-neutral-highlight: #78A0D247;

    /* Marca azul: a branca do tema escuro fica invisivel sobre fundo claro. */
    --ds-brand-mark: url('/images/logos/maia-logo-light.svg');
}