/* ═══════════════════════════════════════════════════════════════════════════════
 * Einblick Nexus PWA — Design Tokens
 * ═══════════════════════════════════════════════════════════════════════════════
 * AMOLED-first design system. Black = pixels off = battery saved.
 * Reference: 005 Plan — PARTE XLII §42.4
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ─── */
:root {
    /* ── Backgrounds ── */
    --bg-primary:      #000000;
    --bg-surface:      #0D0D0D;
    --bg-elevated:     #1A1A1A;
    --bg-hover:        #252525;
    --bg-active:       #333333;

    /* ── Text ── */
    --text-primary:    #E8E8E8;
    --text-secondary:  #8A8A8A;
    --text-tertiary:   #555555;
    --text-inverse:    #000000;

    /* ── Severity / Status ── */
    --accent-green:    #00E676;
    --accent-yellow:   #FFD600;
    --accent-red:      #FF1744;
    --accent-blue:     #448AFF;
    --accent-purple:   #B388FF;
    --accent-orange:   #FF9100;

    /* ── Semantic aliases ── */
    --status-ok:       var(--accent-green);
    --status-warning:  var(--accent-yellow);
    --status-critical: var(--accent-red);
    --status-info:     var(--accent-blue);
    --status-working:  var(--accent-purple);

    /* ── Interactive ── */
    --ring-pulse:      rgba(0, 230, 118, 0.3);
    --ring-warning:    rgba(255, 214, 0, 0.3);
    --ring-critical:   rgba(255, 23, 68, 0.4);

    /* ── Borders ── */
    --border-subtle:   #1E1E1E;
    --border-medium:   #333333;

    /* ── Typography ── */
    --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:       'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

    --fs-xs:           0.6875rem;   /* 11px */
    --fs-sm:           0.75rem;     /* 12px */
    --fs-base:         0.875rem;    /* 14px */
    --fs-md:           1rem;        /* 16px */
    --fs-lg:           1.125rem;    /* 18px — watch minimum */
    --fs-xl:           1.375rem;    /* 22px */
    --fs-2xl:          1.75rem;     /* 28px */
    --fs-3xl:          2.25rem;     /* 36px */

    --fw-normal:       400;
    --fw-medium:       500;
    --fw-semibold:     600;
    --fw-bold:         700;

    --lh-tight:        1.2;
    --lh-normal:       1.5;

    /* ── Spacing ── */
    --sp-1:            4px;
    --sp-2:            8px;
    --sp-3:            12px;
    --sp-4:            16px;
    --sp-5:            20px;
    --sp-6:            24px;
    --sp-8:            32px;

    /* ── Radii ── */
    --radius-sm:       8px;
    --radius-md:       12px;
    --radius-lg:       16px;
    --radius-xl:       24px;
    --radius-full:     9999px;

    /* ── Shadows ── */
    --shadow-card:     0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.7);
    --shadow-glow-green:  0 0 20px rgba(0, 230, 118, 0.25);
    --shadow-glow-red:    0 0 20px rgba(255, 23, 68, 0.3);
    --shadow-glow-yellow: 0 0 20px rgba(255, 214, 0, 0.2);

    /* ── Transitions ── */
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;

    /* ── Touch targets ── */
    --touch-min:       44px;     /* Apple HIG minimum */
    --touch-comfortable: 48px;  /* Comfortable tap for mobile */

    /* ── Z-index layers ── */
    --z-base:          1;
    --z-nav:           10;
    --z-overlay:       100;
    --z-modal:         200;
    --z-toast:         300;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * Global Reset & Base Styles
 * ═══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow: hidden;
    height: 100dvh;      /* Dynamic viewport height — respects mobile browser chrome */
    width: 100vw;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Screen management ── */
.screen {
    display: none;
    width: 100%;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
}

.screen.active {
    display: flex;
    flex-direction: column;
}

/* ── Scrollbar (hidden by default, visible on mobile for content areas) ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); }

/* ── Utility: hidden ── */
.hidden { display: none !important; }

/* ── Animations ── */
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 var(--ring-pulse); }
    50%      { box-shadow: 0 0 0 16px transparent; }
}

@keyframes pulse-yellow {
    0%, 100% { box-shadow: 0 0 0 0 var(--ring-warning); }
    50%      { box-shadow: 0 0 0 16px transparent; }
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 var(--ring-critical); }
    50%      { box-shadow: 0 0 0 18px transparent; }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.anim-fade-in { animation: fade-in var(--duration-normal) var(--ease-out) both; }
.anim-slide-up { animation: slide-up var(--duration-slow) var(--ease-out) both; }