/* 
   SUMAENIMÁ DESIGN SYSTEM — TOKENS (v1.6.0)
   DNA Visual: Material You (Android 16) + Glassmorphism.
   Foco: Dark Mode Elegante, Cantos Extremos, Transparência.
*/

:root {
    /* ── Typography (Lexend) ── */
    font-family: 'Lexend', system-ui, -apple-system, sans-serif;
    --md-sys-typescale-body-large-font: 'Lexend';
    --md-sys-typescale-body-medium-font: 'Lexend';
    --md-sys-typescale-body-small-font: 'Lexend';
    --md-sys-typescale-display-large-font: 'Lexend';
    --md-sys-typescale-display-medium-font: 'Lexend';
    --md-sys-typescale-display-small-font: 'Lexend';
    --md-sys-typescale-headline-large-font: 'Lexend';
    --md-sys-typescale-headline-medium-font: 'Lexend';
    --md-sys-typescale-headline-small-font: 'Lexend';
    --md-sys-typescale-label-large-font: 'Lexend';
    --md-sys-typescale-label-medium-font: 'Lexend';
    --md-sys-typescale-label-small-font: 'Lexend';
    --md-sys-typescale-title-large-font: 'Lexend';
    --md-sys-typescale-title-medium-font: 'Lexend';
    --md-sys-typescale-title-small-font: 'Lexend';

    /* ── MD3 Color Tokens (Material You Deep Dark) ── */
    --md-sys-color-primary: #a8c7fa; /* Soft Blue Gemini */
    --md-sys-color-on-primary: #062e6f;
    --md-sys-color-primary-container: rgba(168, 199, 250, 0.16);
    --md-sys-color-on-primary-container: #a8c7fa;
    --md-sys-color-secondary-container: rgba(168, 199, 250, 0.12); /* Soft Blue Container dark */
    --md-sys-color-on-secondary-container: #a8c7fa;
    --md-sys-color-surface: #09090b; /* Zinc 950 */
    --md-sys-color-on-surface: #e4e4e7;
    --md-sys-color-surface-container: #18181b; /* Zinc 900 */
    --md-sys-color-surface-container-high: #27272a; /* Zinc 800 */
    --md-sys-color-outline: rgba(255, 255, 255, 0.06);
    --md-sys-color-error: #f87171;
    --md-sys-color-success: #10b981;
    --md-sys-color-on-success: #042f2e;
    --md-sys-color-error-hover-bg: rgba(248, 113, 113, 0.15);

    /* ── Unified Cyber-Minimalist Radius ── */
    --sm-radius-pill: 2rem;     /* Capsule buttons/badges */
    --sm-radius-card: 1.25rem;  /* 20px - Unified for outer panels, dialogs, visualizer, live transcript */
    --sm-radius-inner: 0.875rem; /* 14px - Unified for inputs and nested inner components */

    /* ── Surface Colors (Zinc Palette) ── */
    --sm-surface-950: #09090b;
    --sm-surface-900: #18181b;
    --sm-surface-800: #27272a;
    --sm-surface-700: #3f3f46;

    /* ── Effects (Glass & Soft Elevation) ── */
    --sm-glass-blur: blur(24px);
    --sm-glass-bg: rgba(24, 24, 27, 0.7);
    --sm-glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --sm-shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.36);

    /* ── MD3 Native Custom Properties ── */
    --md-icon-font: 'Material Symbols Rounded';
}

/* ── Utility Classes ── */
.sm-glass {
    background: var(--sm-glass-bg);
    backdrop-filter: var(--sm-glass-blur);
    -webkit-backdrop-filter: var(--sm-glass-blur);
    border: var(--sm-glass-border);
    box-shadow: var(--sm-shadow-soft);
}

.sm-card-glass {
    background: rgba(39, 39, 42, 0.4);
    backdrop-filter: var(--sm-glass-blur);
    border: var(--sm-glass-border);
    border-radius: var(--sm-radius-card);
}

.sm-rounded-pill {
    border-radius: var(--sm-radius-pill);
}

/* ── MD3 Native Icon Styling ── */
md-icon {
    --md-icon-font: 'Material Symbols Rounded';
    font-family: 'Material Symbols Rounded' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24;
}

/* ── Dynamic Themes ── */

/* Theme Cold (StênioREC Cyan/Ice Vibe) */
body.theme-cold {
    --md-sys-color-primary: #80ebff; /* Ice Blue / Cyan Gemini */
    --md-sys-color-on-primary: #00363d;
    --md-sys-color-primary-container: rgba(128, 235, 255, 0.16);
    --md-sys-color-on-primary-container: #80ebff;
    --md-sys-color-secondary-container: rgba(128, 235, 255, 0.12);
    --md-sys-color-on-secondary-container: #80ebff;
}

/* Theme Warm (StênioPANEL Emerald Vibe) */
body.theme-warm {
    --md-sys-color-primary: #6ee7b7; /* Emerald Green */
    --md-sys-color-on-primary: #042f2e;
    --md-sys-color-primary-container: rgba(110, 231, 183, 0.16);
    --md-sys-color-on-primary-container: #6ee7b7;
    --md-sys-color-secondary-container: rgba(110, 231, 183, 0.12);
    --md-sys-color-on-secondary-container: #6ee7b7;
}