/* ==========================================================================
   Proposta360 — Design Tokens
   Fonte única de verdade para cor, tipografia, espaçamento, raio, sombra e motion.
   Nenhum componente deve declarar hex, px de espaçamento ou duração diretamente.

   Os valores estão organizados para serem portados para o app nativo:
   os tokens semânticos (--surface, --text, --brand…) mapeiam 1:1 para o que
   seria um ThemeProvider em React Native / Flutter.
   ========================================================================== */

:root {
    /* --- Paleta primitiva ------------------------------------------------ */
    --blue-50: #eff5ff;
    --blue-100: #dbe8fe;
    --blue-200: #bfd7fe;
    --blue-300: #93bbfd;
    --blue-400: #609afa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;

    --amber-100: #fef3c7;
    --amber-300: #fcd34d;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;

    --emerald-100: #d1fae5;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --emerald-700: #047857;

    --rose-100: #ffe4e6;
    --rose-500: #f43f5e;
    --rose-600: #e11d48;
    --rose-700: #be123c;

    --violet-100: #ede9fe;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;

    --slate-0: #ffffff;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-150: #e9eef6;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* --- Tema claro (padrão) --------------------------------------------- */
    --bg: var(--slate-50);
    --bg-subtle: var(--slate-100);
    --surface: var(--slate-0);
    --surface-raised: var(--slate-0);
    --surface-sunken: var(--slate-100);
    --surface-inverse: var(--slate-900);

    --text: var(--slate-900);
    --text-muted: var(--slate-500);
    --text-subtle: var(--slate-400);
    --text-inverse: var(--slate-0);
    --text-on-brand: #ffffff;

    --border: var(--slate-200);
    --border-strong: var(--slate-300);
    --border-subtle: var(--slate-150);

    --brand: var(--blue-800);
    --brand-hover: var(--blue-900);
    --brand-soft: var(--blue-50);
    --brand-soft-text: var(--blue-800);
    --brand-ring: rgb(30 64 175 / 0.35);

    --accent: var(--amber-600);
    --accent-soft: var(--amber-100);
    --accent-soft-text: var(--amber-700);

    --success: var(--emerald-600);
    --success-soft: var(--emerald-100);
    --success-soft-text: var(--emerald-700);

    --warning: var(--amber-600);
    --warning-soft: var(--amber-100);
    --warning-soft-text: var(--amber-700);

    --danger: var(--rose-600);
    --danger-soft: var(--rose-100);
    --danger-soft-text: var(--rose-700);

    --info: var(--violet-600);
    --info-soft: var(--violet-100);
    --info-soft-text: var(--violet-600);

    /* Gradientes de marca — usados com parcimônia (hero, CTA primário, score) */
    --gradient-brand: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-900) 100%);
    --gradient-accent: linear-gradient(135deg, var(--amber-500) 0%, var(--amber-700) 100%);
    --gradient-mesh:
        radial-gradient(at 15% 15%, rgb(59 130 246 / 0.16) 0px, transparent 55%),
        radial-gradient(at 85% 10%, rgb(139 92 246 / 0.12) 0px, transparent 50%),
        radial-gradient(at 75% 85%, rgb(245 158 11 / 0.10) 0px, transparent 50%);

    /* Vidro — barras de navegação e overlays */
    --glass-bg: rgb(255 255 255 / 0.72);
    --glass-border: rgb(255 255 255 / 0.6);
    --scrim: rgb(15 23 42 / 0.55);

    /* --- Tipografia ------------------------------------------------------- */
    --font-display: 'Calistoga', ui-serif, Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --text-2xs: 0.6875rem;  /* 11px — apenas rótulos mono em caixa alta */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.9375rem; /* 15px */
    --text-md: 1rem;        /* 16px — corpo de leitura */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.375rem;    /* 22px */
    --text-2xl: 1.75rem;    /* 28px */
    --text-3xl: 2.25rem;    /* 36px */
    --text-4xl: 3rem;       /* 48px */
    --text-5xl: 3.75rem;    /* 60px */

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.55;
    --leading-relaxed: 1.7;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-label: 0.09em;

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

    /* --- Espaçamento (ritmo 4/8) ------------------------------------------ */
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.25rem;   /* 20 */
    --space-6: 1.5rem;    /* 24 */
    --space-8: 2rem;      /* 32 */
    --space-10: 2.5rem;   /* 40 */
    --space-12: 3rem;     /* 48 */
    --space-16: 4rem;     /* 64 */
    --space-20: 5rem;     /* 80 */
    --space-24: 6rem;     /* 96 */

    /* --- Raio -------------------------------------------------------------- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 999px;

    /* --- Elevação ---------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
    --shadow-sm: 0 1px 3px rgb(15 23 42 / 0.07), 0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.04);
    --shadow-lg: 0 12px 28px rgb(15 23 42 / 0.10), 0 4px 8px rgb(15 23 42 / 0.05);
    --shadow-xl: 0 24px 56px rgb(15 23 42 / 0.14), 0 8px 16px rgb(15 23 42 / 0.06);
    --shadow-brand: 0 8px 24px rgb(30 64 175 / 0.28);
    --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.6);

    /* --- Ícones ------------------------------------------------------------- */
    --icon-xs: 14px;
    --icon-sm: 18px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-stroke: 1.75;

    /* --- Motion ------------------------------------------------------------- */
    /* Micro-interações entre 150-300ms; nada acima de 400ms na interface. */
    --duration-instant: 100ms;
    --duration-fast: 160ms;
    --duration-base: 220ms;
    --duration-slow: 320ms;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Layout ------------------------------------------------------------- */
    --sidebar-width: 264px;
    --topbar-height: 64px;
    --bottombar-height: 60px;
    --content-max: 1440px;
    --prose-max: 68ch;

    /* Áreas seguras: no navegador valem 0; num wrapper nativo (TWA/Capacitor)
       passam a refletir notch e barra de gestos. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    --z-base: 1;
    --z-sticky: 100;
    --z-nav: 200;
    --z-dropdown: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;

    color-scheme: light;
}

/* ==========================================================================
   Tema escuro
   Superfícies elevadas ficam MAIS claras que o fundo (padrão Material),
   e as bordas continuam visíveis — não basta inverter o tema claro.
   ========================================================================== */
:root[data-theme='dark'] {
    --bg: #0a0f1c;
    --bg-subtle: #0f1626;
    --surface: #121a2b;
    --surface-raised: #182134;
    --surface-sunken: #0c1220;
    --surface-inverse: var(--slate-50);

    --text: #eef2f9;
    --text-muted: #97a3ba;
    --text-subtle: #6b7a95;
    --text-inverse: var(--slate-900);
    --text-on-brand: #ffffff;

    --border: #253148;
    --border-strong: #33425e;
    --border-subtle: #1b2436;

    --brand: var(--blue-500);
    --brand-hover: var(--blue-400);
    --brand-soft: rgb(59 130 246 / 0.15);
    --brand-soft-text: var(--blue-300);
    --brand-ring: rgb(96 154 250 / 0.45);

    --accent: var(--amber-500);
    --accent-soft: rgb(245 158 11 / 0.16);
    --accent-soft-text: var(--amber-300);

    --success: var(--emerald-500);
    --success-soft: rgb(16 185 129 / 0.16);
    --success-soft-text: #6ee7b7;

    --warning: var(--amber-500);
    --warning-soft: rgb(245 158 11 / 0.16);
    --warning-soft-text: var(--amber-300);

    --danger: var(--rose-500);
    --danger-soft: rgb(244 63 94 / 0.16);
    --danger-soft-text: #fda4af;

    --info: var(--violet-500);
    --info-soft: rgb(139 92 246 / 0.16);
    --info-soft-text: #c4b5fd;

    --gradient-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-900) 100%);
    --gradient-mesh:
        radial-gradient(at 15% 15%, rgb(59 130 246 / 0.20) 0px, transparent 55%),
        radial-gradient(at 85% 10%, rgb(139 92 246 / 0.16) 0px, transparent 50%),
        radial-gradient(at 75% 85%, rgb(245 158 11 / 0.10) 0px, transparent 50%);

    --glass-bg: rgb(18 26 43 / 0.78);
    --glass-border: rgb(255 255 255 / 0.08);
    --scrim: rgb(2 6 23 / 0.7);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.45), 0 4px 8px rgb(0 0 0 / 0.25);
    --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.55), 0 8px 16px rgb(0 0 0 / 0.3);
    --shadow-brand: 0 8px 24px rgb(37 99 235 / 0.4);
    --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.05);

    color-scheme: dark;
}

/* Segue a preferência do sistema quando o usuário não escolheu explicitamente. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --bg: #0a0f1c;
        --bg-subtle: #0f1626;
        --surface: #121a2b;
        --surface-raised: #182134;
        --surface-sunken: #0c1220;
        --surface-inverse: var(--slate-50);

        --text: #eef2f9;
        --text-muted: #97a3ba;
        --text-subtle: #6b7a95;
        --text-inverse: var(--slate-900);

        --border: #253148;
        --border-strong: #33425e;
        --border-subtle: #1b2436;

        --brand: var(--blue-500);
        --brand-hover: var(--blue-400);
        --brand-soft: rgb(59 130 246 / 0.15);
        --brand-soft-text: var(--blue-300);
        --brand-ring: rgb(96 154 250 / 0.45);

        --accent: var(--amber-500);
        --accent-soft: rgb(245 158 11 / 0.16);
        --accent-soft-text: var(--amber-300);

        --success: var(--emerald-500);
        --success-soft: rgb(16 185 129 / 0.16);
        --success-soft-text: #6ee7b7;

        --warning: var(--amber-500);
        --warning-soft: rgb(245 158 11 / 0.16);
        --warning-soft-text: var(--amber-300);

        --danger: var(--rose-500);
        --danger-soft: rgb(244 63 94 / 0.16);
        --danger-soft-text: #fda4af;

        --info: var(--violet-500);
        --info-soft: rgb(139 92 246 / 0.16);
        --info-soft-text: #c4b5fd;

        --gradient-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-900) 100%);
        --glass-bg: rgb(18 26 43 / 0.78);
        --glass-border: rgb(255 255 255 / 0.08);
        --scrim: rgb(2 6 23 / 0.7);

        --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
        --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.2);
        --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.2);
        --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.45), 0 4px 8px rgb(0 0 0 / 0.25);
        --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.55), 0 8px 16px rgb(0 0 0 / 0.3);
        --shadow-brand: 0 8px 24px rgb(37 99 235 / 0.4);
        --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.05);

        color-scheme: dark;
    }
}