/*
 * Tudo Eh Mental — Design System
 * Fase 3. Não aplicado às páginas públicas até aprovação.
 */

:root {
    color-scheme: light;

    /* Cores de base */
    --tem-color-canvas: #f5f2eb;
    --tem-color-surface: #fffdf8;
    --tem-color-surface-muted: #ece8df;
    --tem-color-ink: #182033;
    --tem-color-text: #30394d;
    --tem-color-text-muted: #626b7c;
    --tem-color-border: #d9d4c9;

    /* Marca e ações */
    --tem-color-primary: #3730a3;
    --tem-color-primary-hover: #2f287f;
    --tem-color-primary-soft: #ebe9ff;
    --tem-color-accent: #a47735;
    --tem-color-accent-soft: #f5ead8;
    --tem-color-focus: #2563eb;

    /* Estados */
    --tem-color-success: #18794e;
    --tem-color-success-soft: #e7f6ee;
    --tem-color-warning: #9a5b08;
    --tem-color-warning-soft: #fff3dc;
    --tem-color-danger: #b42318;
    --tem-color-danger-soft: #feeceb;
    --tem-color-disabled: #a8adb7;

    /* Tipografia */
    --tem-font-display: "Cinzel", Georgia, "Times New Roman", serif;
    --tem-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tem-font-size-xs: 0.75rem;
    --tem-font-size-sm: 0.875rem;
    --tem-font-size-base: 1rem;
    --tem-font-size-lg: 1.125rem;
    --tem-font-size-xl: 1.375rem;
    --tem-font-size-2xl: clamp(1.75rem, 4vw, 2.5rem);
    --tem-font-size-3xl: clamp(2.35rem, 7vw, 4.75rem);
    --tem-leading-tight: 1.12;
    --tem-leading-heading: 1.25;
    --tem-leading-body: 1.7;

    /* Espaçamento — escala baseada em 4px */
    --tem-space-1: 0.25rem;
    --tem-space-2: 0.5rem;
    --tem-space-3: 0.75rem;
    --tem-space-4: 1rem;
    --tem-space-5: 1.25rem;
    --tem-space-6: 1.5rem;
    --tem-space-8: 2rem;
    --tem-space-10: 2.5rem;
    --tem-space-12: 3rem;
    --tem-space-16: 4rem;
    --tem-space-20: 5rem;
    --tem-space-24: 6rem;

    /* Forma e profundidade */
    --tem-radius-sm: 0.375rem;
    --tem-radius-md: 0.75rem;
    --tem-radius-lg: 1.25rem;
    --tem-radius-pill: 999px;
    --tem-shadow-sm: 0 1px 2px rgb(24 32 51 / 0.08);
    --tem-shadow-md: 0 12px 32px rgb(24 32 51 / 0.10);
    --tem-content-width: 72rem;
    --tem-reading-width: 44rem;

    /* Movimento */
    --tem-duration-fast: 150ms;
    --tem-duration-base: 220ms;
    --tem-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.tem-page {
    margin: 0;
    background: var(--tem-color-canvas);
    color: var(--tem-color-text);
    font-family: var(--tem-font-body);
    font-size: var(--tem-font-size-base);
    line-height: var(--tem-leading-body);
}

.tem-container {
    width: min(var(--tem-content-width), calc(100% - 2rem));
    margin-inline: auto;
}

.tem-reading-width { max-width: var(--tem-reading-width); }

.tem-eyebrow {
    margin: 0 0 var(--tem-space-3);
    color: var(--tem-color-primary);
    font-size: var(--tem-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tem-display,
.tem-heading,
.tem-subheading {
    margin-top: 0;
    color: var(--tem-color-ink);
    font-family: var(--tem-font-display);
    font-weight: 700;
}

.tem-display {
    margin-bottom: var(--tem-space-6);
    font-size: var(--tem-font-size-3xl);
    line-height: var(--tem-leading-tight);
    letter-spacing: -0.025em;
}

.tem-heading {
    margin-bottom: var(--tem-space-5);
    font-size: var(--tem-font-size-2xl);
    line-height: var(--tem-leading-heading);
}

.tem-subheading {
    margin-bottom: var(--tem-space-3);
    font-size: var(--tem-font-size-xl);
    line-height: var(--tem-leading-heading);
}

.tem-lead {
    margin: 0 0 var(--tem-space-8);
    color: var(--tem-color-text-muted);
    font-size: var(--tem-font-size-lg);
    line-height: 1.75;
}

.tem-link {
    color: var(--tem-color-primary);
    font-weight: 750;
    text-underline-offset: 0.2em;
    transition: color var(--tem-duration-fast) var(--tem-ease);
}

.tem-link:hover { color: var(--tem-color-primary-hover); }

.tem-button {
    display: inline-flex;
    min-height: 2.875rem;
    align-items: center;
    justify-content: center;
    gap: var(--tem-space-2);
    padding: 0.7rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--tem-radius-pill);
    font: 750 var(--tem-font-size-sm)/1 var(--tem-font-body);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--tem-duration-fast) var(--tem-ease),
        border-color var(--tem-duration-fast) var(--tem-ease),
        color var(--tem-duration-fast) var(--tem-ease),
        transform var(--tem-duration-fast) var(--tem-ease);
}

.tem-button:hover { transform: translateY(-1px); }
.tem-button:active { transform: translateY(0); }

.tem-button--primary {
    background: var(--tem-color-primary);
    color: #fff;
}

.tem-button--primary:hover { background: var(--tem-color-primary-hover); }

.tem-button--secondary {
    border-color: var(--tem-color-primary);
    background: transparent;
    color: var(--tem-color-primary);
}

.tem-button--secondary:hover { background: var(--tem-color-primary-soft); }

.tem-button--quiet {
    padding-inline: 0;
    background: transparent;
    color: var(--tem-color-primary);
}

.tem-button--quiet:hover { color: var(--tem-color-primary-hover); }

.tem-button:disabled,
.tem-button[aria-disabled="true"] {
    background: var(--tem-color-surface-muted);
    border-color: var(--tem-color-border);
    color: var(--tem-color-disabled);
    cursor: not-allowed;
    transform: none;
}

.tem-button:focus-visible,
.tem-link:focus-visible,
.tem-input:focus-visible,
.tem-select:focus-visible,
.tem-textarea:focus-visible,
.tem-nav-link:focus-visible {
    outline: 3px solid var(--tem-color-focus);
    outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[contenteditable="true"]:focus-visible {
    outline: 3px solid var(--tem-color-focus);
    outline-offset: 3px;
}

@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible,
    [contenteditable="true"]:focus-visible {
        outline-color: Highlight;
    }
}

.tem-section { padding-block: var(--tem-space-20); }
.tem-section--surface { background: var(--tem-color-surface); }
.tem-section--ink { background: var(--tem-color-ink); color: #fff; }
.tem-section--ink .tem-heading,
.tem-section--ink .tem-subheading { color: #fff; }
.tem-section--ink .tem-lead { color: #d7dbe5; }

.tem-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tem-space-6);
}

.tem-card {
    padding: var(--tem-space-8);
    border: 1px solid var(--tem-color-border);
    border-radius: var(--tem-radius-md);
    background: var(--tem-color-surface);
}

.tem-card--featured {
    border-top: 3px solid var(--tem-color-accent);
    box-shadow: var(--tem-shadow-sm);
}

.tem-card p:last-child { margin-bottom: 0; }

.tem-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: var(--tem-radius-pill);
    background: var(--tem-color-accent-soft);
    color: #704b16;
    font-size: var(--tem-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tem-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tem-space-2);
    margin: 0;
    padding: 0;
    color: var(--tem-color-text-muted);
    font-size: var(--tem-font-size-sm);
    list-style: none;
}

.tem-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: var(--tem-space-2);
    color: var(--tem-color-border);
}

.tem-label {
    display: block;
    margin-bottom: var(--tem-space-2);
    color: var(--tem-color-ink);
    font-size: var(--tem-font-size-sm);
    font-weight: 750;
}

.tem-help,
.tem-error {
    display: block;
    margin-top: var(--tem-space-2);
    font-size: var(--tem-font-size-sm);
}

.tem-help { color: var(--tem-color-text-muted); }
.tem-error { color: var(--tem-color-danger); }

.tem-input,
.tem-select,
.tem-textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--tem-color-border);
    border-radius: var(--tem-radius-sm);
    background: var(--tem-color-surface);
    color: var(--tem-color-text);
    font: inherit;
}

.tem-input[aria-invalid="true"] { border-color: var(--tem-color-danger); }
.tem-textarea { min-height: 8rem; resize: vertical; }

.tem-alert {
    padding: var(--tem-space-4) var(--tem-space-5);
    border-left: 4px solid currentColor;
    border-radius: 0 var(--tem-radius-sm) var(--tem-radius-sm) 0;
}

.tem-alert--success { background: var(--tem-color-success-soft); color: var(--tem-color-success); }
.tem-alert--warning { background: var(--tem-color-warning-soft); color: var(--tem-color-warning); }
.tem-alert--danger { background: var(--tem-color-danger-soft); color: var(--tem-color-danger); }

.tem-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--tem-space-8);
    padding: var(--tem-space-10);
    border-radius: var(--tem-radius-lg);
    background: var(--tem-color-primary-soft);
}

.tem-cta p { margin: 0; color: var(--tem-color-text-muted); }

.tem-header {
    border-bottom: 1px solid var(--tem-color-border);
    background: rgb(255 253 248 / 0.96);
}

.tem-header__inner {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--tem-space-6);
}

.tem-brand {
    color: var(--tem-color-ink);
    font-family: var(--tem-font-display);
    font-size: var(--tem-font-size-lg);
    font-weight: 700;
    text-decoration: none;
}

.tem-nav { display: flex; align-items: center; gap: var(--tem-space-5); }
.tem-nav-link { color: var(--tem-color-text); font-size: var(--tem-font-size-sm); font-weight: 700; text-decoration: none; }
.tem-nav-link:hover,
.tem-nav-link[aria-current="page"] { color: var(--tem-color-primary); }

.tem-footer {
    padding-block: var(--tem-space-12);
    background: var(--tem-color-ink);
    color: #d7dbe5;
}

@media (max-width: 760px) {
    .tem-section { padding-block: var(--tem-space-16); }
    .tem-grid { grid-template-columns: 1fr; }
    .tem-cta { grid-template-columns: 1fr; padding: var(--tem-space-8); }
    .tem-header__inner { align-items: flex-start; flex-direction: column; padding-block: var(--tem-space-4); }
    .tem-nav { width: 100%; overflow-x: auto; padding-bottom: var(--tem-space-2); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}