/* ===========================================================================
   Tema — Maestro Barber
   Referência: docs/DESIGN_SYSTEM_MAESTRO.md

   Este arquivo mora em `public/tema.css` DENTRO da instância do Maestro.
   Ele não entra no build: é carregado depois do app.css e só redefine as
   variáveis do @theme. Duas consequências práticas:

     1. A instância da Elisandra não tem este arquivo e não muda em nada.
     2. Nenhuma classe precisa ser reescrita — `gradiente-ouro`, `texto-ouro`,
        `.cartao`, `.btn-primario` e o halo do login já leem estas variáveis,
        então trocam de cor sozinhos.

   Os nomes das variáveis continuam falando em "ouro". Foi decisão consciente:
   o papel é o mesmo (o metal da marca), e renomear obrigaria a editar todas as
   telas — que é justamente o que este arquivo existe para evitar.

   Paleta amostrada de maestro/logo_maestro.jpeg.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Kaushan+Script&display=swap');

:root {
    /* --- Tipografia ---------------------------------------------------
       Oswald: condensada, de cartaz — o mesmo registro do "BARBER." do logo.
       Kaushan Script: pincel inclinado, parente do "Maestro" manuscrito.
       Montserrat continua no corpo: legibilidade não é lugar de personalidade. */
    --font-display: 'Oswald', 'Montserrat', ui-sans-serif, sans-serif;
    --font-signature: 'Kaushan Script', cursive;

    /* --- Marinho: os três fundos do logo ------------------------------- */
    --color-preto: #030f30; /* fundo da aplicação   */
    --color-preto-cetim: #071838; /* painel do assistente */
    --color-superficie-alta: #0c2350; /* bolha da conversa    */

    /* --- Cromado: o metal da navalha -----------------------------------
       Rampa de cinco pontos, do aço à luz. É ela que o `gradiente-ouro`
       usa para o botão primário e o `texto-ouro` para os títulos. */
    --color-ouro: #a9bdd6; /* aço médio — bordas e anéis   */
    --color-ouro-claro: #dbe6f4; /* texto de destaque            */
    --color-ouro-brilho: #ffffff; /* alta-luz do gradiente        */
    --color-ouro-profundo: #5c7396; /* sombra do gradiente          */
    --color-bronze: #35496c; /* divisor                      */
    --color-champagne: #c3d4e8; /* subtítulo da tela de marca   */

    /* --- Neutros frios (matiz ~215°) ----------------------------------- */
    --color-neutro-50: #f1f5fa;
    --color-neutro-100: #d5dfec;
    --color-neutro-300: #94a5be;
    --color-neutro-500: #5b6c87;
    --color-neutro-700: #1e3157;
    --color-neutro-800: #0d2047;
    --color-neutro-900: #081838;
    --color-neutro-950: #030f30;

    /* --- Semânticas: mesma leitura, saturadas para o marinho ----------- */
    --color-sucesso: #0f5a46;
    --color-sucesso-texto: #4fc79f;
    --color-alerta: #a85e1e;
    --color-alerta-texto: #e8a15c;
    --color-perigo: #a81d2a;
    --color-perigo-texto: #f0787f;
    --color-info: #1e3a6b;
    --color-info-texto: #8fb3e8;
}

/* ---------------------------------------------------------------------------
   Ajustes que não são só de cor.

   O Oswald é condensado e tem eixo vertical: no tamanho grande ele pede
   caixa alta e tracking, senão parece um Playfair espremido.
   --------------------------------------------------------------------------- */

.font-display {
    letter-spacing: 0.02em;
}

/* Os títulos de tela ("Agendar", "Clientes") ganham o registro de cartaz. */
h1.font-display,
h2.font-display {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* O horário do cartão de agendamento NÃO entra em caixa alta: é número, e
   caixa alta em número só atrapalha a leitura em varredura. */
.numerico.font-display,
.font-display.numerico {
    text-transform: none;
    letter-spacing: 0.01em;
}

/* O manuscrito do logo é gordo; a assinatura das telas de marca acompanha. */
.font-signature {
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   Tela de marca

   Sem retrato de pessoa, o fundo ficaria vazio. A navalha entra como marca
   d'água — grande, cortada pela borda, quase invisível. Presença, não figura.
   --------------------------------------------------------------------------- */

.retrato-marca {
    right: -22%;
    bottom: -4%;
    height: min(86vh, 820px);
    opacity: 0.34;
}

@media (min-width: 640px) {
    .retrato-marca {
        right: -8%;
        height: min(84vh, 780px);
    }
}

/* O halo do marinho aguenta mais luz que o do preto sem lavar o formulário. */
.halo-ouro {
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-ouro) 22%, transparent) 0%,
        color-mix(in srgb, var(--color-ouro) 9%, transparent) 38%,
        transparent 68%
    );
}