/* ===== MATERIAL DESIGN 3 - ANDROID DEVELOPER THEME ===== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Android Brand Colors */
    --android-green: #3DDC84;
    --android-green-dark: #27AE60;
    --android-green-dim: rgba(61, 220, 132, 0.12);
    --android-green-container: #003919;

    /* Material 3 Dark Surface Scale */
    --surface-0:  #0D0D14;
    --surface-1:  #13131E;
    --surface-2:  #191926;
    --surface-3:  #1E1E2E;
    --surface-4:  #252535;
    --surface-5:  #2B2B3E;

    /* Secondary - Violet */
    --secondary: #BB86FC;
    --secondary-dim: rgba(187, 134, 252, 0.12);
    --secondary-container: #21004E;

    /* Tertiary - Sky */
    --tertiary: #64B5F6;
    --tertiary-dim: rgba(100, 181, 246, 0.12);

    /* Semantic */
    --error: #CF6679;
    --warning: #FFB74D;
    --success: var(--android-green);

    /* Text */
    --on-surface: #E6E1E5;
    --on-surface-variant: #CAC4D0;
    --on-surface-dim: #938F99;
    --on-primary: #003019;

    /* Outline */
    --outline: #49454F;
    --outline-variant: #2B2930;

    /* Semantic aliases for existing classes */
    --bg-primary:   var(--surface-0);
    --bg-secondary: var(--surface-1);
    --bg-tertiary:  var(--surface-3);
    --text-primary:    var(--on-surface);
    --text-secondary:  var(--on-surface-variant);
    --text-tertiary:   var(--on-surface-dim);
    --text-muted:      var(--on-surface-dim);
    --border-color:    var(--outline-variant);
    --card-bg:         var(--surface-2);
    --card-border:     var(--outline-variant);

    /* Legacy color vars (used throughout) */
    --color-white: #E6E1E5;
    --color-emerald-400: var(--android-green);
    --color-emerald-500: var(--android-green);
    --color-emerald-600: var(--android-green-dark);
    --color-sky-400: var(--tertiary);
    --color-sky-500: var(--tertiary);
    --color-sky-600: #4fc3f7;
    --color-slate-300: var(--on-surface-variant);
    --color-yellow-400: #FFD54F;
    --color-red-500: #CF6679;

    /* Spacing (8dp grid) */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius - Material 3 */
    --radius-sm: 0.25rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.75rem;
    --radius-full: 9999px;

    /* Elevation Shadows */
    --shadow-1: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-2: 0 4px 6px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
    --shadow-3: 0 10px 20px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4);
    --glow-green: 0 0 24px rgba(61,220,132,0.25);
    --glow-violet: 0 0 24px rgba(187,134,252,0.2);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.2,0,0,1);
    --transition-base: 300ms cubic-bezier(0.2,0,0,1);
    --transition-slow: 500ms cubic-bezier(0.2,0,0,1);
}