/*
 * MeuProntuário — Design tokens
 * Base visual compartilhada entre a landing page (meu-prontuario-site) e o app.
 * Mantenha este arquivo idêntico nos dois projetos.
 * Altere as cores/tipografia aqui; os componentes consomem apenas as variáveis.
 */
:root {
    /* Marca */
    --mp-brand-50: #ecf8f6;
    --mp-brand-100: #d2efea;
    --mp-brand-200: #a6dfd5;
    --mp-brand-400: #2fb4a2;
    --mp-brand-500: #14a391;
    --mp-brand-600: #0a7c6e;
    --mp-brand-700: #086a5e;
    --mp-brand-800: #0a4f47;

    /* Destaque (herança do laranja da marca anterior, agora coral) */
    --mp-accent-50: #fff3ed;
    --mp-accent-100: #ffe1d3;
    --mp-accent-500: #ff7a45;
    --mp-accent-600: #e85f28;

    /* Neutros (levemente esverdeados para conversar com a marca) */
    --mp-ink: #0b1f2a;
    --mp-ink-soft: #13303d;
    /* Fundo escuro da marca que não muda com o tema (menu lateral, faixas de destaque) */
    --mp-ink-fixo: #0b1f2a;
    --mp-gray-50: #f6f8f8;
    --mp-gray-100: #eef2f2;
    --mp-gray-200: #dde5e5;
    --mp-gray-300: #c4d0d1;
    --mp-gray-500: #6b7d80;
    --mp-gray-600: #4b5d60;
    --mp-gray-700: #33454a;
    --mp-white: #fff;

    /* Semânticas */
    --mp-success: #16a34a;
    --mp-danger: #dc2626;
    --mp-whatsapp: #25d366;

    --mp-bg: var(--mp-white);
    --mp-bg-subtle: var(--mp-gray-50);
    --mp-surface: var(--mp-white);
    --mp-surface-translucida: rgba(255, 255, 255, .92);
    --mp-text: var(--mp-ink);
    --mp-text-muted: var(--mp-gray-600);
    --mp-border: var(--mp-gray-200);
    --mp-primary: var(--mp-brand-600);
    --mp-primary-hover: var(--mp-brand-700);
    --mp-focus: 0 0 0 3px rgba(20, 163, 145, .35);

    /* Tipografia */
    --mp-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mp-fs-xs: .8125rem;
    --mp-fs-sm: .9375rem;
    --mp-fs-md: 1.0625rem;
    --mp-fs-lg: clamp(1.125rem, 1rem + .4vw, 1.25rem);
    --mp-fs-h3: 1.25rem;
    --mp-fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
    --mp-fs-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);

    /* Espaçamento / forma */
    --mp-radius-sm: 8px;
    --mp-radius: 14px;
    --mp-radius-lg: 22px;
    --mp-radius-pill: 999px;
    --mp-shadow-sm: 0 1px 2px rgba(11, 31, 42, .06), 0 1px 3px rgba(11, 31, 42, .08);
    --mp-shadow: 0 4px 12px rgba(11, 31, 42, .06), 0 12px 32px rgba(11, 31, 42, .08);
    --mp-shadow-lg: 0 24px 60px rgba(11, 31, 42, .18);

    --mp-container: 1200px;
    --mp-gutter: clamp(16px, 4vw, 32px);
    --mp-section-y: clamp(64px, 9vw, 120px);

    --mp-ease: cubic-bezier(.2, .7, .2, 1);
}

/*
 * Tema escuro: ativado com data-tema="escuro" no <html>.
 * Mesma marca, com superfícies em tons do "ink" e tons de destaque mais claros
 * para manter o contraste dos textos.
 */
[data-tema="escuro"] {
    color-scheme: dark;

    --mp-brand-50: #0f302e;
    --mp-brand-100: #134540;
    --mp-brand-200: #1c5d55;
    --mp-brand-700: #5fd3c1;
    --mp-brand-800: #8be2d4;

    --mp-accent-50: #3a2216;
    --mp-accent-100: #50301f;

    --mp-ink: #eef4f5;
    --mp-ink-soft: #d6e2e5;

    --mp-gray-50: #11252f;
    --mp-gray-100: #162d38;
    --mp-gray-200: #213d4a;
    --mp-gray-300: #2e5060;
    --mp-gray-500: #8ea5ab;
    --mp-gray-600: #a9bdc2;
    --mp-gray-700: #c8d6d9;

    --mp-bg: #08161d;
    --mp-bg-subtle: #0a1a22;
    --mp-surface: #0f222b;
    --mp-surface-translucida: rgba(15, 34, 43, .9);
    --mp-text: #e6eef0;
    --mp-text-muted: #9fb3b8;
    --mp-border: #1d3640;
    --mp-primary-hover: #0b8c7c;
    --mp-focus: 0 0 0 3px rgba(47, 180, 162, .45);

    --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --mp-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --mp-shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
}