/*
 * web/css/base.css
 *
 * Reset, design tokens, typography, and viewport tricks used by every
 * screen in meethub (lobby, call, alone, denied, error, admin).
 *
 * Tokens are arranged by concern:
 *   --bg-*     surface colours used for solid fills
 *   --text-*   typography colours
 *   --accent-* brand violet and its neighbours
 *   --status-* semantic colours (red/green/yellow)
 *   --glass-*  stacked values for frosted surfaces
 *   --ease-*   cubic-beziers used across the app
 *   --dur-*    motion durations (so they stay consistent everywhere)
 *   --z-*      z-index stacking order
 */

@font-face {
    font-family: 'Satoshi';
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    src: local('Satoshi');
}
@font-face {
    font-family: 'Inter';
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    src: local('Inter');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    src: local('JetBrains Mono');
}

:root {
    /* Surfaces */
    --bg-deep:    #07070B;
    --bg-surface: #0C0C14;
    --bg-elev-1:  rgba(255, 255, 255, 0.04);
    --bg-elev-2:  rgba(255, 255, 255, 0.08);

    /* Text */
    --text-primary:   #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-tertiary:  rgba(255, 255, 255, 0.48);
    --text-muted:     rgba(255, 255, 255, 0.28);

    /* Accents */
    --accent:       #8B5CF6;
    --accent-bright:#A78BFA;
    --accent-deep:  #6D3FEA;
    --accent-soft:  rgba(139, 92, 246, 0.22);

    /* Semantic status */
    --status-danger:  #FF3B5C;
    --status-danger-deep: #E01E3C;
    --status-ok:      #30D158;
    --status-warn:    #FFC531;
    --status-away:    #FF9F0A;

    /* Frosted surfaces */
    --glass-weak:   rgba(255, 255, 255, 0.08);
    --glass-mid:    rgba(255, 255, 255, 0.14);
    --glass-strong: rgba(20, 18, 32, 0.72);
    --glass-border: rgba(255, 255, 255, 0.10);

    /* Motion */
    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-accel:   cubic-bezier(0.55, 0, 1, 0.45);
    --dur-fast:     150ms;
    --dur-med:      260ms;
    --dur-slow:     420ms;
    --dur-page:     520ms;

    /* Radii */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Shadows — warm violet-biased so they read on a dark ambient bg. */
    --sh-tile:   0 20px 60px -20px rgba(0, 0, 0, 0.65),
                 0 4px 16px -6px rgba(124, 77, 255, 0.25);
    --sh-pip:    0 18px 48px -16px rgba(0, 0, 0, 0.80),
                 0 6px 20px -6px rgba(124, 77, 255, 0.30);
    --sh-button: 0 6px 20px -6px rgba(0, 0, 0, 0.55);
    --sh-header: 0 4px 24px -8px rgba(0, 0, 0, 0.55);

    /* Glows */
    --glow-accent: 0 0 0 1px rgba(167, 139, 250, 0.22),
                   0 8px 40px -12px rgba(139, 92, 246, 0.55);
    --glow-danger: 0 0 0 1px rgba(255, 59, 92, 0.30),
                   0 8px 40px -12px rgba(255, 59, 92, 0.60);

    /* Fonts */
    --font-display: 'Satoshi', 'Manrope', 'SF Pro Display',
                    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body:    'Inter', 'SF Pro Text',
                    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Monaco',
                    'Menlo', 'Consolas', monospace;

    /* Z-index stacking (so any file can reason about ordering). */
    --z-bg:       -3;
    --z-orbs:     -2;
    --z-content:   0;
    --z-pip:       40;
    --z-pills:     50;
    --z-header:    60;
    --z-footer:    60;
    --z-modal:    100;
    --z-toast:    200;
    --z-grain:   9999;

    /* Dynamic viewport: prefers dvh (accounts for Android URL-bar
       collapsing), falls back to plain vh for older engines. */
    --app-height: 100dvh;

    /* Safe-area shorthands so any panel can apply them in one line. */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    height: var(--app-height);
    width: 100%;
    overflow: hidden;  /* call UI never scrolls — we control everything */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-deep);
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* iOS bounce on textfields etc. */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-deep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01', 'cv11', 'cv09';
    letter-spacing: -0.005em;
    overflow: hidden;
    min-height: 100%;
    min-height: var(--app-height);
    position: relative;
    user-select: none;
}

/* Typography helpers used across screens. */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1 { font-size: clamp(28px, 6vw, 40px); }
h2 { font-size: clamp(22px, 4.5vw, 28px); }
h3 { font-size: clamp(18px, 3.5vw, 22px); }

small, .mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
}

input, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

img, svg, video {
    display: block;
    max-width: 100%;
}

video { background: var(--bg-deep); }
/* Ensure iOS treats inline <video> as inline, not system-wide full-screen. */
video { -webkit-playsinline: true; playsinline: true; }

a {
    color: var(--accent-bright);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--text-primary); }

/* --- Global utility classes --- */

/* A reusable 28×28 icon box that scales via em so buttons get predictable sizing. */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    flex: none;
}

/* Screen-reader only content for aria labels. */
.sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Icons use fill="currentColor" so colour is inherited from the nearest
   stylable element. Disable pointer events so they don't swallow clicks
   on the button they sit inside. */
svg { pointer-events: none; }

/* Text selection — violet-tinted. */
::selection {
    background: rgba(139, 92, 246, 0.4);
    color: var(--text-primary);
}

/* Subtle custom scrollbar for desktop (admin page mainly). */
@media (min-width: 768px) and (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: rgba(139, 92, 246, 0.28);
        border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.5); }
}

/* Respect the OS "reduced motion" preference everywhere. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- State machine for <body data-state> ---
 * Each screen (lobby/call/alone/denied/error/kicked/preview-camera) is
 * in the DOM at all times and selectively revealed based on data-state.
 * This avoids teardown/rebuild on every transition and keeps WebRTC
 * bindings alive during state swaps. */
.screen {
    position: absolute;
    inset: 0;
    display: none;
    opacity: 0;
    transition: opacity var(--dur-page) var(--ease-out);
    pointer-events: none;
}
body[data-state="lobby"]          .screen.screen-lobby    { display: flex; opacity: 1; pointer-events: auto; }
body[data-state="call"]           .screen.screen-call     { display: flex; opacity: 1; pointer-events: auto; }
body[data-state="alone"]          .screen.screen-call     { display: flex; opacity: 1; pointer-events: auto; }
body[data-state="alone-warning"]  .screen.screen-call     { display: flex; opacity: 1; pointer-events: auto; }
body[data-state="preview-camera"] .screen.screen-call     { display: flex; opacity: 1; pointer-events: auto; }
body[data-state="denied"]         .screen.screen-message  { display: flex; opacity: 1; pointer-events: auto; }
body[data-state="error"]          .screen.screen-message  { display: flex; opacity: 1; pointer-events: auto; }
body[data-state="kicked"]         .screen.screen-message  { display: flex; opacity: 1; pointer-events: auto; }