/**
 * IPFrame — design system (partilhado)
 * Sem cor de marca final: tokens semânticos sobrescritos em main-public.css / main-app.css
 */
:root {
    color-scheme: dark;
    --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --shadow-card: 0 24px 80px rgba(0, 0, 0, 0.35);

    --bg-page: #020617;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --border-subtle: rgba(148, 163, 184, 0.18);
    --accent: #38bdf8;
    --accent-2: #a78bfa;
    --accent-muted: color-mix(in srgb, var(--accent) 35%, transparent);

    --surface-1: rgba(15, 23, 42, 0.78);
    --surface-2: rgba(2, 6, 23, 0.32);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);

    /* Três níveis de profundidade (área autenticada) */
    --depth-1-bg: rgba(15, 23, 42, 0.55);
    --depth-2-bg: rgba(2, 6, 23, 0.45);
    --depth-3-bg: rgba(15, 23, 42, 0.72);
    --depth-border: rgba(148, 163, 184, 0.14);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.ipframe {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    color: var(--text);
    line-height: 1.5;
}

/**
 * Material Symbols Outlined (ligatures) — o <link> Google Fonts deve estar no head;
 * sem font-family o texto do ícone (ex.: "dashboard") cai na Inter e parece "partido".
 */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Ligaduras convertem o nome do glifo (ex. dashboard) no símbolo */
    font-feature-settings: "liga" 1;
    font-variant-ligatures: common-ligatures;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Cartão base (marketing / páginas públicas) */
.card {
    width: min(100%, 980px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface-1);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

/* Hierarquia visual — nível 1 = página, 2 = secção, 3 = painel / rodapé de bloco */
.ds-depth-1 {
    background: var(--depth-1-bg);
    border: 1px solid var(--depth-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

.ds-depth-2 {
    background: var(--depth-2-bg);
    border: 1px solid var(--depth-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-top: var(--space-4);
}

.ds-depth-3 {
    background: var(--depth-3-bg);
    border: 1px solid var(--depth-border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-top: var(--space-3);
}

.ds-depth-1 > :first-child,
.ds-depth-2 > :first-child,
.ds-depth-3 > :first-child {
    margin-top: 0;
}

.ds-depth-1 h1,
.ds-depth-1 h2,
.ds-depth-2 h1,
.ds-depth-2 h2 {
    margin-top: 0;
}

/* Formulários base */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
    width: 100%;
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--depth-border);
    background: rgba(2, 6, 23, 0.4);
    color: var(--text);
    font: inherit;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

button {
    font: inherit;
    cursor: pointer;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}