/* =============================================================================
   ONE CONNECTION WebDialer — design tokens
   Palette derived directly from the OC logo: purple ring -> blue ring gradient.
   Dark, low-glare surface (softphones live on screen all day; a bright UI
   fights the eye during long shifts) with the brand gradient reserved for
   the few places that should carry weight: the logo, the call button, and
   status accents.
   ============================================================================= */
:root {
  /* Brand gradient — the infinity "OC" mark, purple ring to blue ring */
  --oc-purple-900: #2E1F52;
  --oc-purple-700: #4B2E85;
  --oc-purple-500: #6E4FB0;
  --oc-purple-300: #9B84D4;
  --oc-blue-700: #2E5478;
  --oc-blue-500: #4E85B3;
  --oc-blue-300: #8FBBDD;

  --oc-gradient: linear-gradient(135deg, var(--oc-purple-500) 0%, var(--oc-blue-500) 100%);
  --oc-gradient-deep: linear-gradient(135deg, var(--oc-purple-700) 0%, var(--oc-blue-700) 100%);

  /* Surface */
  --bg-base: #0B0D17;
  --bg-raised: #12152400;
  --bg-surface: #141827;
  --bg-surface-2: #1B2035;
  --bg-elevated: #212642;
  --border-subtle: #262c47;
  --border-strong: #363d63;

  /* Text */
  --text-primary: #F2F3FA;
  --text-secondary: #A8AECB;
  --text-muted: #6B7295;
  --text-on-gradient: #FFFFFF;

  /* Status */
  --status-online: #34D399;
  --status-online-dim: #1A5F49;
  --status-busy: #F59E0B;
  --status-offline: #6B7295;
  --status-danger: #F0546B;
  --status-danger-dim: #4A1F29;

  /* Elevation */
  --shadow-card: 0 20px 60px -20px rgba(9, 10, 20, 0.7);
  --shadow-dock: 0 12px 32px -8px rgba(9, 10, 20, 0.6);
  --shadow-glow-purple: 0 0 40px -8px rgba(110, 79, 176, 0.55);
  --shadow-glow-blue: 0 0 40px -8px rgba(78, 133, 179, 0.5);

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Rhythm */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(110, 79, 176, 0.16), transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 100%, rgba(78, 133, 179, 0.14), transparent 60%);
  background-attachment: fixed;
}

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--oc-blue-300);
  outline-offset: 2px;
}

input {
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

::selection { background: var(--oc-purple-500); color: white; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.oc-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.oc-brand-mark img { height: 40px; width: auto; display: block; }

.oc-gradient-text {
  background: var(--oc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}