/* ==========================================================================
   MATERIAL DESIGN 3 — Design Tokens
   Brand: Dot Design | Dark & Light Mode Support
   Reference: https://m3.material.io/
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOR TOKENS — Dark Mode (Default)
   -------------------------------------------------------------------------- */
:root {
    /* === Color Scheme Toggle === */
    color-scheme: dark light;

    /* === Primary (Industrial Brutalist) === */
    --md-sys-color-primary: #FF0080;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #3d0019;
    --md-sys-color-on-primary-container: #ffd9e2;

    /* === Secondary === */
    --md-sys-color-secondary: #7928CA;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #1a2d54;
    --md-sys-color-on-secondary-container: #d6e3ff;

    /* === Tertiary (Cyan Accent) === */
    --md-sys-color-tertiary: #00F0FF;
    --md-sys-color-on-tertiary: #003135;
    --md-sys-color-tertiary-container: #004d54;
    --md-sys-color-on-tertiary-container: #a0f0ff;

    /* === Error (Industrial Red) === */
    --md-sys-color-error: #FF3333;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    /* === Surface (Industrial Dark Mode) === */
    --md-sys-color-background: #050505;
    --md-sys-color-on-background: #ffffff;
    --md-sys-color-surface: #050505;
    --md-sys-color-on-surface: #ffffff;

    /* === Surface Variants === */
    --md-sys-color-surface-variant: #1a1a1a;
    --md-sys-color-on-surface-variant: #a1a1aa;
    --md-sys-color-surface-container-lowest: #020202;
    --md-sys-color-surface-container-low: #080808;
    --md-sys-color-surface-container: #0F0F10;
    --md-sys-color-surface-container-high: #1a1a1a;
    --md-sys-color-surface-container-highest: #2a2a2a;

    /* === Tonal Surface (Glassmorphism) === */
    --md-sys-color-surface-tint: rgba(255, 0, 128, 0.08);
    --md-sys-color-surface-tonal: rgba(255, 255, 255, 0.05);
    --md-sys-color-surface-tonal-hover: rgba(255, 255, 255, 0.08);
    --md-sys-color-surface-tonal-pressed: rgba(255, 255, 255, 0.12);

    /* === Outline === */
    --md-sys-color-outline: rgba(255, 255, 255, 0.12);
    --md-sys-color-outline-variant: rgba(255, 255, 255, 0.08);

    /* === Inverse === */
    --md-sys-color-inverse-surface: #ffffff;
    --md-sys-color-inverse-on-surface: #050505;
    --md-sys-color-inverse-primary: #c41062;

    /* === Scrim & Shadow === */
    --md-sys-color-scrim: rgba(0, 0, 0, 0.6);
    --md-sys-color-shadow: rgba(0, 0, 0, 0.3);

    /* === Brand Gradient (The Neon Pulse) === */
    --md-sys-color-gradient-primary: linear-gradient(90deg, #FF0080 0%, #7928CA 100%);
    --md-sys-color-gradient-surface: linear-gradient(180deg, rgba(255, 0, 128, 0.08) 0%, transparent 100%);
    
    /* === Success/Alert Colors === */
    --md-sys-color-success: #00F0FF;
    --md-sys-color-warning: #FFAA00;
}

/* --------------------------------------------------------------------------
   2. COLOR TOKENS — Light Mode
   -------------------------------------------------------------------------- */
[data-theme="light"] {
    /* === Surface (Light Mode) === */
    --md-sys-color-background: #ffffff;
    --md-sys-color-on-background: #0a0a0a;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #0a0a0a;

    /* === Surface Variants === */
    --md-sys-color-surface-variant: #f5f5f5;
    --md-sys-color-on-surface-variant: #5a5a5a;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #fafafa;
    --md-sys-color-surface-container: #f5f5f5;
    --md-sys-color-surface-container-high: #efefef;
    --md-sys-color-surface-container-highest: #e8e8e8;

    /* === Tonal Surface === */
    --md-sys-color-surface-tint: rgba(230, 44, 125, 0.05);
    --md-sys-color-surface-tonal: rgba(0, 0, 0, 0.03);
    --md-sys-color-surface-tonal-hover: rgba(0, 0, 0, 0.06);
    --md-sys-color-surface-tonal-pressed: rgba(0, 0, 0, 0.1);

    /* === Outline === */
    --md-sys-color-outline: rgba(0, 0, 0, 0.12);
    --md-sys-color-outline-variant: rgba(0, 0, 0, 0.06);

    /* === Inverse === */
    --md-sys-color-inverse-surface: #0a0a0a;
    --md-sys-color-inverse-on-surface: #ffffff;
    --md-sys-color-inverse-primary: #ff6ba8;

    /* === Scrim & Shadow === */
    --md-sys-color-shadow: rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* === Font Families === */
    --md-sys-typescale-font-family-brand: 'Space Grotesk', system-ui, sans-serif;
    --md-sys-typescale-font-family-plain: 'Inter', system-ui, sans-serif;
    --md-sys-typescale-font-family-mono: 'JetBrains Mono', monospace;

    /* === Arabic Font Families === */
    --md-sys-typescale-font-family-brand-ar: 'Readex Pro', 'Space Grotesk', system-ui, sans-serif;
    --md-sys-typescale-font-family-plain-ar: 'Alexandria', 'Inter', system-ui, sans-serif;
    --md-sys-typescale-font-family-mono-ar: 'Readex Pro', monospace;

    /* === Display === */
    --md-sys-typescale-display-large-size: clamp(3.5rem, 2.5rem + 5vw, 6rem);
    --md-sys-typescale-display-large-weight: 700;
    --md-sys-typescale-display-large-line-height: 1;
    --md-sys-typescale-display-large-tracking: -0.02em;

    --md-sys-typescale-display-medium-size: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --md-sys-typescale-display-medium-weight: 600;
    --md-sys-typescale-display-medium-line-height: 1.1;
    --md-sys-typescale-display-medium-tracking: -0.015em;

    --md-sys-typescale-display-small-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    --md-sys-typescale-display-small-weight: 600;
    --md-sys-typescale-display-small-line-height: 1.15;
    --md-sys-typescale-display-small-tracking: -0.01em;

    /* === Headline === */
    --md-sys-typescale-headline-large-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    --md-sys-typescale-headline-large-weight: 600;
    --md-sys-typescale-headline-large-line-height: 1.25;

    --md-sys-typescale-headline-medium-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
    --md-sys-typescale-headline-medium-weight: 600;
    --md-sys-typescale-headline-medium-line-height: 1.3;

    --md-sys-typescale-headline-small-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --md-sys-typescale-headline-small-weight: 600;
    --md-sys-typescale-headline-small-line-height: 1.35;

    /* === Title === */
    --md-sys-typescale-title-large-size: 1.375rem;
    --md-sys-typescale-title-large-weight: 600;
    --md-sys-typescale-title-large-line-height: 1.4;

    --md-sys-typescale-title-medium-size: 1rem;
    --md-sys-typescale-title-medium-weight: 600;
    --md-sys-typescale-title-medium-line-height: 1.5;

    --md-sys-typescale-title-small-size: 0.875rem;
    --md-sys-typescale-title-small-weight: 600;
    --md-sys-typescale-title-small-line-height: 1.5;

    /* === Body === */
    --md-sys-typescale-body-large-size: 1.125rem;
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-large-line-height: 1.7;

    --md-sys-typescale-body-medium-size: 1rem;
    --md-sys-typescale-body-medium-weight: 400;
    --md-sys-typescale-body-medium-line-height: 1.6;

    --md-sys-typescale-body-small-size: 0.875rem;
    --md-sys-typescale-body-small-weight: 400;
    --md-sys-typescale-body-small-line-height: 1.5;

    /* === Label === */
    --md-sys-typescale-label-large-size: 0.875rem;
    --md-sys-typescale-label-large-weight: 600;
    --md-sys-typescale-label-large-line-height: 1.4;
    --md-sys-typescale-label-large-tracking: 0.02em;

    --md-sys-typescale-label-medium-size: 0.75rem;
    --md-sys-typescale-label-medium-weight: 600;
    --md-sys-typescale-label-medium-line-height: 1.3;
    --md-sys-typescale-label-medium-tracking: 0.05em;

    --md-sys-typescale-label-small-size: 0.6875rem;
    --md-sys-typescale-label-small-weight: 600;
    --md-sys-typescale-label-small-line-height: 1.3;
    --md-sys-typescale-label-small-tracking: 0.08em;
}

/* --------------------------------------------------------------------------
   4. ELEVATION TOKENS (M3 Tonal Elevation)
   -------------------------------------------------------------------------- */
:root {
    /* === Tonal Elevation (Dark Mode) === */
    --md-sys-elevation-level0: transparent;
    --md-sys-elevation-level1: rgba(255, 255, 255, 0.05);
    --md-sys-elevation-level2: rgba(255, 255, 255, 0.08);
    --md-sys-elevation-level3: rgba(255, 255, 255, 0.11);
    --md-sys-elevation-level4: rgba(255, 255, 255, 0.12);
    --md-sys-elevation-level5: rgba(255, 255, 255, 0.14);

    /* === Shadow Elevation === */
    --md-sys-elevation-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --md-sys-elevation-shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --md-sys-elevation-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --md-sys-elevation-shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    --md-sys-elevation-shadow-5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

[data-theme="light"] {
    /* === Tonal Elevation (Light Mode) === */
    --md-sys-elevation-level1: rgba(0, 0, 0, 0.02);
    --md-sys-elevation-level2: rgba(0, 0, 0, 0.04);
    --md-sys-elevation-level3: rgba(0, 0, 0, 0.06);
    --md-sys-elevation-level4: rgba(0, 0, 0, 0.08);
    --md-sys-elevation-level5: rgba(0, 0, 0, 0.10);
}

/* --------------------------------------------------------------------------
   5. MOTION TOKENS (M3 Motion)
   -------------------------------------------------------------------------- */
:root {
    /* === Duration === */
    --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;
    --md-sys-motion-duration-extra-long3: 900ms;
    --md-sys-motion-duration-extra-long4: 1000ms;

    /* === Easing === */
    --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-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);
}

/* --------------------------------------------------------------------------
   6. SHAPE TOKENS
   -------------------------------------------------------------------------- */
:root {
    --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-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;
}

/* --------------------------------------------------------------------------
   7. SPACING TOKENS
   -------------------------------------------------------------------------- */
:root {
    --md-sys-spacing-1: 0.25rem;
    --md-sys-spacing-2: 0.5rem;
    --md-sys-spacing-3: 0.75rem;
    --md-sys-spacing-4: 1rem;
    --md-sys-spacing-5: 1.25rem;
    --md-sys-spacing-6: 1.5rem;
    --md-sys-spacing-8: 2rem;
    --md-sys-spacing-10: 2.5rem;
    --md-sys-spacing-12: 3rem;
    --md-sys-spacing-16: 4rem;
    --md-sys-spacing-20: 5rem;
    --md-sys-spacing-24: 6rem;
    --md-sys-spacing-32: 8rem;
}

/* --------------------------------------------------------------------------
   8. LAYOUT TOKENS
   -------------------------------------------------------------------------- */
:root {
    --md-sys-layout-container-max: 1400px;
    --md-sys-layout-container-padding: clamp(1.5rem, 5vw, 6rem);
    --md-sys-layout-top-app-bar-height: 64px;
}

/* --------------------------------------------------------------------------
   9. THEME TRANSITION
   -------------------------------------------------------------------------- */
html {
    transition:
        background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

html.transitioning * {
    transition:
        background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard) !important;
}