/* ═══════════════════════════════════════════════════════════════════════
   tokens.css — Finding Android Shared Design Tokens
   Material Design 3 color, radius, and shadow system
   Shared by: device-page.css, compare.css, and any future MD3-based pages
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Dark Mode (Default) ────────────────────────────────────────────── */
:root {
    /* Surfaces (darkest → lightest) */
    --md-surface:                   #0f1419;
    --md-surface-dim:               #0f1419;
    --md-surface-bright:            #353a40;
    --md-surface-container-lowest:  #0a0f14;
    --md-surface-container-low:     #171c22;
    --md-surface-container:         #1b2026;
    --md-surface-container-high:    #262a30;
    --md-surface-container-highest: #30353b;

    /* Primary */
    --md-primary:                  #98cbff;
    --md-primary-container:        #00a3ff;
    --md-on-primary:               #003354;
    --md-on-primary-container:     #00375a;
    --md-primary-fixed:            #cfe5ff;
    --md-primary-fixed-dim:        #98cbff;
    --md-inverse-primary:          #00629d;

    /* Secondary (teal) */
    --md-secondary:                #71d7cd;
    --md-secondary-container:      #32a097;
    --md-on-secondary:             #003733;
    --md-on-secondary-container:   #00302c;

    /* Tertiary (orange) */
    --md-tertiary:                 #ffb77d;
    --md-tertiary-container:       #eb8104;
    --md-on-tertiary:              #4d2600;

    /* Error */
    --md-error:                    #ffb4ab;
    --md-error-container:          #93000a;

    /* Neutral / text */
    --md-on-surface:               #dfe3ea;
    --md-on-surface-variant:       #bec7d4;
    --md-on-background:            #dfe3ea;
    --md-outline:                  #88919d;
    --md-outline-variant:          #3f4852;
    --md-surface-tint:             #98cbff;
    --md-inverse-surface:          #dfe3ea;
    --md-inverse-on-surface:       #2c3137;

    /* Radii */
    --md-radius-sm:  0.25rem;
    --md-radius-md:  0.5rem;
    --md-radius-lg:  0.75rem;
    --md-radius-xl:  1rem;
    --md-radius-2xl: 1.25rem;
    --md-radius-full: 9999px;

    /* Dark mode shadows & alphas */
    --md-border-alpha: 0.1;
    --md-shadow-color: rgba(0, 0, 0, 0.4);
    --md-hero-glow: rgba(152, 203, 255, 0.1);
    --md-hero-image-glow: rgba(152, 203, 255, 0.2);
    --md-image-shadow: rgba(0, 0, 0, 0.5);
    --md-sidebar-shadow: rgba(0, 0, 0, 0.5);
    --md-fab-shadow: rgba(0, 0, 0, 0.4);
    --md-card-hover-shadow: rgba(0, 0, 0, 0.2);
    --md-selection-bg: rgba(152, 203, 255, 0.3);
    --md-mobile-menu-shadow: rgba(0, 0, 0, 0.5);
}

/* ─── Light Mode Token Overrides ─────────────────────────────────────── */
body.light-mode {
    /* Surfaces (lightest → darkest, inverted hierarchy) */
    --md-surface:                   #ffffff;
    --md-surface-dim:               #d9d9dd;
    --md-surface-bright:            #f9f9fc;
    --md-surface-container-lowest:  #ffffff;
    --md-surface-container-low:     #f3f3f7;
    --md-surface-container:         #f0f0f3;
    --md-surface-container-high:    #e8e8ec;
    --md-surface-container-highest: #e2e2e6;

    /* Primary (deeper blue for white backgrounds) */
    --md-primary:                  #00629d;
    --md-primary-container:        #cfe5ff;
    --md-on-primary:               #ffffff;
    --md-on-primary-container:     #001d35;
    --md-primary-fixed:            #cfe5ff;
    --md-primary-fixed-dim:        #98cbff;
    --md-inverse-primary:          #98cbff;

    /* Secondary */
    --md-secondary:                #006a62;
    --md-secondary-container:      #cce8e4;
    --md-on-secondary:             #ffffff;
    --md-on-secondary-container:   #00201d;

    /* Tertiary */
    --md-tertiary:                 #8b5000;
    --md-tertiary-container:       #ffdcbe;
    --md-on-tertiary:              #ffffff;

    /* Error */
    --md-error:                    #ba1a1a;
    --md-error-container:          #ffdad6;

    /* Neutral / text */
    --md-on-surface:               #1a1c1e;
    --md-on-surface-variant:       #43474e;
    --md-on-background:            #1a1c1e;
    --md-outline:                  #73777f;
    --md-outline-variant:          #c3c7cf;
    --md-surface-tint:             #00629d;
    --md-inverse-surface:          #2f3033;
    --md-inverse-on-surface:       #f1f0f4;

    /* Light-mode specific shadows & alphas */
    --md-border-alpha: 0.2;
    --md-shadow-color: rgba(0, 0, 0, 0.08);
    --md-hero-glow: rgba(0, 98, 157, 0.04);
    --md-hero-image-glow: rgba(0, 98, 157, 0.12);
    --md-image-shadow: rgba(0, 0, 0, 0.15);
    --md-sidebar-shadow: rgba(0, 0, 0, 0.06);
    --md-fab-shadow: rgba(0, 98, 157, 0.3);
    --md-card-hover-shadow: rgba(0, 0, 0, 0.08);
    --md-selection-bg: rgba(0, 98, 157, 0.15);
    --md-mobile-menu-shadow: rgba(0, 0, 0, 0.1);
}