/* The miragetalk.com palette, type stacks, radii and shadows, shared by the shell and the call
   window. Custom properties only: this file stays enabled while the call window is shown. */

:root {
  --ground:      #f7f7f5;
  --panel:       #ffffff;
  --sunk:        #f1f1ef;
  --line:        #e7e5e4;
  --line-2:      #d6d3d1;

  --ink:         #27272a;
  --fg:          #3f3f46;
  --dim:         #71717a;
  --mute:        #a1a1aa;

  --accent:      #4f46e5;
  --accent-2:    #6366f1;
  --accent-soft: #eef2ff;
  --accent-line: #c7d2fe;
  --on-accent:   #ffffff;

  --signal:      #22c55e;
  --signal-ink:  #15803d;
  --signal-soft: #dcfce7;

  --key:         #f59e0b;
  --key-ink:     #b45309;
  --key-soft:    #fef3c7;

  --alert:       #f43f5e;
  --alert-ink:   #be123c;
  --alert-soft:  #ffe4e6;

  --skin-a:      #f2c9a5;
  --skin-b:      #c68b5e;
  --skin-c:      #8d5a3b;
  --hair:        #3f3f46;
  --sea:         #bfdbfe;
  --sea-2:       #93c5fd;

  --scrim:       rgba(39,39,42,.32);
  --chip:        rgba(39,39,42,.07);
  --chip-hover:  rgba(39,39,42,.12);

  --shadow:      0 1px 0 rgba(39,39,42,.03), 0 18px 40px -18px rgba(39,39,42,.22);
  --radius:      22px;
  --radius-sm:   16px;

  --font-text:    "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "Cascadia Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --scheme:      light;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0b0f1a;
    --panel:       #111624;
    --sunk:        #151b2b;
    --line:        #242c3c;
    --line-2:      #33405a;

    --ink:         #eef2f7;
    --fg:          #c8d4df;
    --dim:         #8a97a8;
    --mute:        #5c6776;

    --accent:      #6d64ef;
    --accent-2:    #8b83f5;
    --accent-soft: rgba(109,100,239,.14);
    --accent-line: rgba(139,131,245,.45);
    --on-accent:   #ffffff;

    --signal:      #22c55e;
    --signal-ink:  #4ade80;
    --signal-soft: rgba(34,197,94,.14);

    --key:         #fbbf24;
    --key-ink:     #fbbf24;
    --key-soft:    rgba(251,191,36,.16);

    --alert:       #fb7185;
    --alert-ink:   #fb7185;
    --alert-soft:  rgba(251,113,133,.16);

    --hair:        #1f2937;
    --sea:         #1e3a5f;
    --sea-2:       #2b5282;

    --scrim:       rgba(0,0,0,.55);
    --chip:        rgba(238,242,247,.09);
    --chip-hover:  rgba(238,242,247,.16);

    --shadow:      0 1px 0 rgba(0,0,0,.2), 0 22px 44px -18px rgba(0,0,0,.6);

    --scheme:      dark;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground:      #0b0f1a;
  --panel:       #111624;
  --sunk:        #151b2b;
  --line:        #242c3c;
  --line-2:      #33405a;

  --ink:         #eef2f7;
  --fg:          #c8d4df;
  --dim:         #8a97a8;
  --mute:        #5c6776;

  --accent:      #6d64ef;
  --accent-2:    #8b83f5;
  --accent-soft: rgba(109,100,239,.14);
  --accent-line: rgba(139,131,245,.45);
  --on-accent:   #ffffff;

  --signal:      #22c55e;
  --signal-ink:  #4ade80;
  --signal-soft: rgba(34,197,94,.14);

  --key:         #fbbf24;
  --key-ink:     #fbbf24;
  --key-soft:    rgba(251,191,36,.16);

  --alert:       #fb7185;
  --alert-ink:   #fb7185;
  --alert-soft:  rgba(251,113,133,.16);

  --hair:        #1f2937;
  --sea:         #1e3a5f;
  --sea-2:       #2b5282;

  --scrim:       rgba(0,0,0,.55);
  --chip:        rgba(238,242,247,.09);
  --chip-hover:  rgba(238,242,247,.16);

  --shadow:      0 1px 0 rgba(0,0,0,.2), 0 22px 44px -18px rgba(0,0,0,.6);

  --scheme:      dark;
  color-scheme: dark;
}