/*
 * ════════════════════════════════════════════════════════════════════
 *  kemstanu — Material Design 3 design tokens
 *  Seed: warm purple (#6750A4) + warm tertiary (#B98A5F)
 *  Принципы MD3:
 *    - Depth through TONAL SURFACE color, not shadows
 *    - Dynamic color: Telegram theme overrides --md-sys-color-* in JS
 *    - Full rounded corners by default
 *    - Spring-based expressive motion (easing tokens)
 * ════════════════════════════════════════════════════════════════════
 */

:root {
    /* ══════════════════════ COLOR ROLES (LIGHT) ══════════════════════ */
    /* Primary — brand, высокая интенсивность */
    --md-sys-color-primary: #6750A4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005D;
    --md-sys-color-primary-fixed: #EADDFF;
    --md-sys-color-primary-fixed-dim: #D0BCFF;
    --md-sys-color-on-primary-fixed: #21005D;
    --md-sys-color-on-primary-fixed-variant: #4F378B;

    /* Secondary — приглушённый компаньон */
    --md-sys-color-secondary: #625B71;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1D192B;

    /* Tertiary — тёплый акцент (coral / terracotta) */
    --md-sys-color-tertiary: #8B5A3C;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #FFDBC5;
    --md-sys-color-on-tertiary-container: #311300;

    /* Error */
    --md-sys-color-error: #B3261E;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #F9DEDC;
    --md-sys-color-on-error-container: #410E0B;

    /* Success / Warning — расширение MD3 для сервисных состояний */
    --md-sys-color-success: #1E6D3A;
    --md-sys-color-on-success: #FFFFFF;
    --md-sys-color-success-container: #B6F0BA;
    --md-sys-color-on-success-container: #002109;

    --md-sys-color-warning: #8A5300;
    --md-sys-color-on-warning: #FFFFFF;
    --md-sys-color-warning-container: #FFDDB0;
    --md-sys-color-on-warning-container: #2C1700;

    /* Surface palette (tonal elevation) */
    --md-sys-color-surface: #FEF7FF;
    --md-sys-color-on-surface: #1D1B20;
    --md-sys-color-on-surface-variant: #49454F;

    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #F7F2FA;
    --md-sys-color-surface-container: #F3EDF7;
    --md-sys-color-surface-container-high: #ECE6F0;
    --md-sys-color-surface-container-highest: #E6E0E9;
    --md-sys-color-surface-dim: #DED8E1;
    --md-sys-color-surface-bright: #FEF7FF;

    /* Inverse — snackbars, tooltips, dark-over-light */
    --md-sys-color-inverse-surface: #322F35;
    --md-sys-color-inverse-on-surface: #F5EFF7;
    --md-sys-color-inverse-primary: #D0BCFF;

    /* Outlines */
    --md-sys-color-outline: #79747E;
    --md-sys-color-outline-variant: #CAC4D0;

    /* Scrim */
    --md-sys-color-scrim: rgba(0, 0, 0, 0.32);

    /* State-layer opacities (MD3 interaction layers) */
    --md-sys-state-hover-opacity: 0.08;
    --md-sys-state-focus-opacity: 0.12;
    --md-sys-state-pressed-opacity: 0.12;
    --md-sys-state-dragged-opacity: 0.16;
    --md-sys-state-disabled-opacity: 0.12;
    --md-sys-state-disabled-content-opacity: 0.38;

    /* ══════════════════════ TYPOGRAPHY ══════════════════════ */
    --md-sys-font-family: 'Roboto Flex', 'Inter', -apple-system, BlinkMacSystemFont,
                          'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --md-sys-font-family-brand: 'Roboto Flex', 'Inter', -apple-system, BlinkMacSystemFont,
                                'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

    /* Display */
    --md-sys-typescale-display-large-size: 57px;   --md-sys-typescale-display-large-line-height: 64px;   --md-sys-typescale-display-large-weight: 400;   --md-sys-typescale-display-large-tracking: -0.25px;
    --md-sys-typescale-display-medium-size: 45px;  --md-sys-typescale-display-medium-line-height: 52px;  --md-sys-typescale-display-medium-weight: 400;  --md-sys-typescale-display-medium-tracking: 0;
    --md-sys-typescale-display-small-size: 36px;   --md-sys-typescale-display-small-line-height: 44px;   --md-sys-typescale-display-small-weight: 400;   --md-sys-typescale-display-small-tracking: 0;

    /* Headline */
    --md-sys-typescale-headline-large-size: 32px;  --md-sys-typescale-headline-large-line-height: 40px;  --md-sys-typescale-headline-large-weight: 500; --md-sys-typescale-headline-large-tracking: 0;
    --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line-height: 36px; --md-sys-typescale-headline-medium-weight: 500; --md-sys-typescale-headline-medium-tracking: 0;
    --md-sys-typescale-headline-small-size: 24px;  --md-sys-typescale-headline-small-line-height: 32px;  --md-sys-typescale-headline-small-weight: 500; --md-sys-typescale-headline-small-tracking: 0;

    /* Title */
    --md-sys-typescale-title-large-size: 22px;  --md-sys-typescale-title-large-line-height: 28px;  --md-sys-typescale-title-large-weight: 500;  --md-sys-typescale-title-large-tracking: 0;
    --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-line-height: 24px; --md-sys-typescale-title-medium-weight: 500;  --md-sys-typescale-title-medium-tracking: 0.15px;
    --md-sys-typescale-title-small-size: 14px;  --md-sys-typescale-title-small-line-height: 20px;  --md-sys-typescale-title-small-weight: 500;  --md-sys-typescale-title-small-tracking: 0.1px;

    /* Body */
    --md-sys-typescale-body-large-size: 16px;  --md-sys-typescale-body-large-line-height: 24px;  --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-tracking: 0.5px;
    --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-line-height: 20px; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-tracking: 0.25px;
    --md-sys-typescale-body-small-size: 12px;  --md-sys-typescale-body-small-line-height: 16px;  --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-tracking: 0.4px;

    /* Label */
    --md-sys-typescale-label-large-size: 14px;  --md-sys-typescale-label-large-line-height: 20px;  --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-tracking: 0.1px;
    --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-medium-line-height: 16px; --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-medium-tracking: 0.5px;
    --md-sys-typescale-label-small-size: 11px;  --md-sys-typescale-label-small-line-height: 16px;  --md-sys-typescale-label-small-weight: 500; --md-sys-typescale-label-small-tracking: 0.5px;

    /* ══════════════════════ SHAPE ══════════════════════ */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-large-increased: 20px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-extra-large-increased: 32px;
    --md-sys-shape-corner-extra-extra-large: 48px;
    --md-sys-shape-corner-full: 9999px;

    /* ══════════════════════ ELEVATION (tonal + optional shadow) ══════════════════════ */
    /* MD3 спецификация: elevation выражается тональной заливкой surface-container-*.
     * Тени добавляем только для плавающих элементов (FAB, dialog) и при необходимости. */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.04);
    --md-sys-elevation-level2: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.05);
    --md-sys-elevation-level3: 0 4px 8px 3px rgba(0, 0, 0, 0.07), 0 1px 3px 0 rgba(0, 0, 0, 0.06);
    --md-sys-elevation-level4: 0 6px 10px 4px rgba(0, 0, 0, 0.08), 0 2px 3px 0 rgba(0, 0, 0, 0.07);
    --md-sys-elevation-level5: 0 8px 12px 6px rgba(0, 0, 0, 0.09), 0 4px 4px 0 rgba(0, 0, 0, 0.08);
    /* Legacy aliases (используются в старом коде) */
    --md-sys-elevation-1: var(--md-sys-elevation-level1);
    --md-sys-elevation-2: var(--md-sys-elevation-level2);
    --md-sys-elevation-3: var(--md-sys-elevation-level3);

    /* ══════════════════════ MOTION ══════════════════════ */
    /* Emphasized — первичные переходы (entering/exiting app bar, expand).
     * Standard — утилитарные переходы внутри поверхности. */
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-linear: linear;

    --md-sys-motion-duration-short1: 50ms;
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short3: 150ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;
    --md-sys-motion-duration-long2: 500ms;
    --md-sys-motion-duration-long3: 550ms;
    --md-sys-motion-duration-long4: 600ms;
    --md-sys-motion-duration-extra-long1: 700ms;
    --md-sys-motion-duration-extra-long2: 800ms;
    /* Legacy aliases */
    --md-sys-motion-duration-short: 200ms;
    --md-sys-motion-duration-medium: 300ms;
    --md-sys-motion-duration-long: 500ms;
}

/* ══════════════════════ DARK THEME ══════════════════════ */
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme="light"]) {
        --md-sys-color-primary: #D0BCFF;
        --md-sys-color-on-primary: #381E72;
        --md-sys-color-primary-container: #4F378B;
        --md-sys-color-on-primary-container: #EADDFF;
        --md-sys-color-primary-fixed: #EADDFF;
        --md-sys-color-primary-fixed-dim: #D0BCFF;
        --md-sys-color-on-primary-fixed: #21005D;
        --md-sys-color-on-primary-fixed-variant: #4F378B;

        --md-sys-color-secondary: #CCC2DC;
        --md-sys-color-on-secondary: #332D41;
        --md-sys-color-secondary-container: #4A4458;
        --md-sys-color-on-secondary-container: #E8DEF8;

        --md-sys-color-tertiary: #FFB68E;
        --md-sys-color-on-tertiary: #502400;
        --md-sys-color-tertiary-container: #6C3900;
        --md-sys-color-on-tertiary-container: #FFDBC5;

        --md-sys-color-error: #F2B8B5;
        --md-sys-color-on-error: #601410;
        --md-sys-color-error-container: #8C1D18;
        --md-sys-color-on-error-container: #F9DEDC;

        --md-sys-color-success: #8BD89A;
        --md-sys-color-on-success: #003911;
        --md-sys-color-success-container: #00531E;
        --md-sys-color-on-success-container: #A7F3B5;

        --md-sys-color-warning: #FFB77F;
        --md-sys-color-on-warning: #4A2800;
        --md-sys-color-warning-container: #6A3D00;
        --md-sys-color-on-warning-container: #FFDDB0;

        --md-sys-color-surface: #141218;
        --md-sys-color-on-surface: #E6E0E9;
        --md-sys-color-on-surface-variant: #CAC4D0;

        --md-sys-color-surface-container-lowest: #0F0D13;
        --md-sys-color-surface-container-low: #1D1B20;
        --md-sys-color-surface-container: #211F26;
        --md-sys-color-surface-container-high: #2B2930;
        --md-sys-color-surface-container-highest: #36343B;
        --md-sys-color-surface-dim: #141218;
        --md-sys-color-surface-bright: #3B383E;

        --md-sys-color-inverse-surface: #E6E0E9;
        --md-sys-color-inverse-on-surface: #322F35;
        --md-sys-color-inverse-primary: #6750A4;

        --md-sys-color-outline: #938F99;
        --md-sys-color-outline-variant: #49454F;
        --md-sys-color-scrim: rgba(0, 0, 0, 0.55);
    }
}