/* Tokens compartilhados do frontend. */
:root {
    --ui-font-family: 'Century Gothic', 'Segoe UI', sans-serif;
    --ui-font-size: 1rem;
    --ui-text-xs: 0.75rem;
    --ui-text-sm: 0.875rem;
    --ui-text-md: 1rem;
    --ui-text-lg: 1.125rem;
    --ui-text-xl: clamp(1.5rem, 2.4vw, 2.25rem);
    --ui-text-display: clamp(1.75rem, 3.2vw, 3.25rem);
    --ui-weight-regular: 400;
    --ui-weight-medium: 500;
    --ui-weight-semibold: 600;
    --ui-weight-bold: 700;
    --ui-leading-tight: 1.15;
    --ui-leading-body: 1.55;
    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.25rem;
    --ui-space-6: 1.5rem;
    --ui-radius-sm: 0.625rem;
    --ui-radius-md: 0.875rem;
    --ui-radius-lg: 1.25rem;
    --ui-control-min-height: 2.75rem;
    --ui-border-color: var(--portal-border, rgba(255, 255, 255, 0.12));
    --ui-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.2);
    --ui-breakpoint-phone: 639px;
    --ui-breakpoint-tablet: 767px;
    --ui-breakpoint-desktop: 1023px;

    --portal-color-scheme: dark;
    --portal-bg: #050816;
    --portal-bg-elevated: rgba(11, 18, 35, 0.92);
    --portal-bg-soft: rgba(255, 255, 255, 0.05);
    --portal-surface: rgba(8, 15, 30, 0.78);
    --portal-surface-strong: rgba(15, 23, 42, 0.92);
    --portal-card: rgba(255, 255, 255, 0.05);
    --portal-card-muted: rgba(255, 255, 255, 0.035);
    --portal-text-primary: #f8fafc;
    --portal-text-muted: #94a3b8;
    --portal-text-soft: #cbd5e1;
    --portal-border: rgba(255, 255, 255, 0.12);
    --portal-border-strong: rgba(148, 163, 184, 0.22);
    --portal-shadow: 0 28px 70px rgba(2, 6, 23, 0.42);
    --portal-button-bg: linear-gradient(135deg, #0f766e, #0891b2);
    --portal-button-text: #f8fafc;
    --portal-button-border: rgba(103, 232, 249, 0.18);
    --portal-accent: #34d399;
    --portal-accent-soft: rgba(52, 211, 153, 0.14);
    --portal-topbar: rgba(5, 8, 22, 0.68);
    --portal-glow-top: radial-gradient(circle at top, rgba(29, 205, 159, 0.2), transparent 56%);
    --portal-glow-left: rgba(56, 189, 248, 0.12);
    --portal-glow-right: rgba(245, 158, 11, 0.12);
    --portal-grid: linear-gradient(140deg, rgba(255, 255, 255, 0.03), transparent 30%, rgba(255, 255, 255, 0.015) 70%, transparent);
}

html[data-theme="light"] {
    --portal-color-scheme: light;
    --portal-bg: #e7edf5;
    --portal-bg-elevated: rgba(19, 31, 50, 0.96);
    --portal-bg-soft: rgba(255, 255, 255, 0.82);
    --portal-surface: rgba(255, 255, 255, 0.94);
    --portal-surface-strong: rgba(243, 247, 252, 0.99);
    --portal-card: rgba(255, 255, 255, 0.97);
    --portal-card-muted: rgba(246, 249, 253, 0.98);
    --portal-text-primary: #182338;
    --portal-text-muted: #5d6c84;
    --portal-text-soft: #405067;
    --portal-border: rgba(126, 141, 163, 0.24);
    --portal-border-strong: rgba(90, 108, 133, 0.34);
    --portal-shadow: 0 18px 38px rgba(24, 35, 56, 0.08), 0 34px 80px rgba(24, 35, 56, 0.1);
    --portal-button-bg: linear-gradient(135deg, #123a67, #1d75d1);
    --portal-button-text: #ffffff;
    --portal-button-border: rgba(29, 117, 209, 0.16);
    --portal-accent: #123a67;
    --portal-accent-soft: rgba(18, 58, 103, 0.08);
    --portal-topbar: rgba(255, 255, 255, 0.74);
    --portal-glow-top: radial-gradient(circle at top, rgba(31, 78, 146, 0.08), transparent 58%);
    --portal-glow-left: rgba(18, 58, 103, 0.045);
    --portal-glow-right: rgba(29, 117, 209, 0.05);
    --portal-grid: linear-gradient(145deg, rgba(24, 35, 56, 0.025), transparent 26%, rgba(29, 117, 209, 0.02) 74%, transparent);
}