/* Echuni design tokens – shared by host and listener.
   Theme: data-theme="light" | "dark" on <html>; without it the system setting applies. */

:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bg: #EEF2FC;
  /* "Echo" look of the app icon: deep blue light from the top left, the cyan voice point, violet echo */
  /* coloured light behind the glass: without it frosted surfaces would have nothing to show */
  --page: radial-gradient(1000px 700px at 6% -8%, rgba(79, 139, 255, 0.42), transparent 68%),
          radial-gradient(820px 620px at 74% 32%, rgba(99, 214, 208, 0.32), transparent 70%),
          radial-gradient(720px 560px at 26% 96%, rgba(124, 92, 250, 0.16), transparent 70%),
          radial-gradient(980px 760px at 102% 108%, rgba(124, 92, 250, 0.28), transparent 70%),
          linear-gradient(160deg, #E8EDFB, #F2F0FB);
  --sidebar: rgba(255, 255, 255, 0.40);
  --panel: rgba(255, 255, 255, 0.50);          /* glass: the page light shines through */
  --panel-raised: rgba(255, 255, 255, 0.90);   /* the chosen item in a switch or the menu */
  --panel-solid: rgba(255, 255, 255, 0.86);    /* over other content (dialogs), blurred behind */
  --panel-2: rgba(30, 50, 140, 0.06);
  --inset: rgba(255, 255, 255, 0.40);          /* a glass tile inside a panel */
  --field: rgba(255, 255, 255, 0.62);          /* text fields and drop-downs */
  --border: rgba(16, 24, 64, 0.09);
  --rim: rgba(255, 255, 255, 0.90);            /* lit edge of a glass surface */
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%);   /* light on the upper edge */
  --blur: blur(24px) saturate(180%);
  --text: #0E1640;
  --text-2: #5B6488;
  --primary: #3B6FDB;
  --primary-hover: #2F5CBF;
  --on-primary: #FFFFFF;
  --grad-primary: linear-gradient(180deg, #5E97FF, #2E5BDB);
  --grad-voice: linear-gradient(90deg, #63D6D0, #4F8BFF);
  --glow-primary: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 8px 22px rgba(46, 91, 219, 0.32);
  --glow-voice: 0 0 14px rgba(99, 214, 208, 0.55);
  --link: #3B6FDB;
  --brand: #5B8DEF;
  --accent: #63D6D0;
  --sel-bg: rgba(79, 139, 255, 0.14);
  --sel-fg: #1B3FA8;
  --success: #0B7A74;
  --success-bg: rgba(99, 214, 208, 0.18);
  --live: #22B8AF;
  --warning: #B54708;
  --warning-bg: rgba(255, 246, 222, 0.80);
  --error: #B42318;
  --error-bg: rgba(254, 240, 238, 0.82);
  --danger: #D92D20;
  --info: #2F5CBF;
  --info-bg: rgba(79, 139, 255, 0.12);
  --wave-off: rgba(30, 50, 140, 0.12);
  --focus: #5B8DEF;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(16, 24, 64, 0.04) inset, 0 14px 40px rgba(28, 40, 110, 0.12);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 8px rgba(28, 40, 110, 0.08);
  --field-shadow: 0 1px 2px rgba(16, 24, 64, 0.06) inset;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0F33;
    --page: radial-gradient(1000px 700px at 6% -10%, rgba(46, 86, 214, 0.62), transparent 68%),
            radial-gradient(760px 560px at 72% 32%, rgba(63, 200, 192, 0.22), transparent 70%),
            radial-gradient(700px 560px at 26% 96%, rgba(124, 92, 250, 0.20), transparent 70%),
            radial-gradient(980px 760px at 102% 108%, rgba(74, 63, 217, 0.42), transparent 70%),
            linear-gradient(160deg, #0B1240, #070A26);
    --sidebar: rgba(255, 255, 255, 0.04);
    --panel: rgba(255, 255, 255, 0.06);
    --panel-raised: rgba(255, 255, 255, 0.15);
    --panel-solid: rgba(17, 24, 72, 0.86);
    --panel-2: rgba(255, 255, 255, 0.06);
    --inset: rgba(255, 255, 255, 0.045);
    --field: rgba(255, 255, 255, 0.07);
    --border: rgba(255, 255, 255, 0.10);
    --rim: rgba(255, 255, 255, 0.16);
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 40%);
    --text: #F2F5FF;
    --text-2: #A3ADD6;
    --primary: #3B6FDB;
    --primary-hover: #4F7FE3;
    --on-primary: #FFFFFF;
    --glow-primary: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 24px rgba(46, 91, 219, 0.45);
    --link: #7AA3F3;
    --sel-bg: rgba(255, 255, 255, 0.10);
    --sel-fg: #FFFFFF;
    --success: #5FE3D4;
    --success-bg: rgba(99, 214, 208, 0.14);
    --live: #3FD8CC;
    --warning: #FDB022;
    --warning-bg: rgba(60, 44, 14, 0.62);
    --error: #F97066;
    --error-bg: rgba(64, 24, 22, 0.62);
    --info: #7AA3F3;
    --info-bg: rgba(79, 139, 255, 0.16);
    --wave-off: rgba(255, 255, 255, 0.10);
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 -1px 0 rgba(0, 0, 0, 0.25) inset, 0 20px 46px rgba(2, 4, 20, 0.42);
    --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 2px 10px rgba(2, 4, 20, 0.30);
    --field-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0F33;
  --page: radial-gradient(1000px 700px at 6% -10%, rgba(46, 86, 214, 0.62), transparent 68%),
          radial-gradient(760px 560px at 72% 32%, rgba(63, 200, 192, 0.22), transparent 70%),
          radial-gradient(700px 560px at 26% 96%, rgba(124, 92, 250, 0.20), transparent 70%),
          radial-gradient(980px 760px at 102% 108%, rgba(74, 63, 217, 0.42), transparent 70%),
          linear-gradient(160deg, #0B1240, #070A26);
  --sidebar: rgba(255, 255, 255, 0.04);
  --panel: rgba(255, 255, 255, 0.06);
  --panel-raised: rgba(255, 255, 255, 0.15);
  --panel-solid: rgba(17, 24, 72, 0.86);
  --panel-2: rgba(255, 255, 255, 0.06);
  --inset: rgba(255, 255, 255, 0.045);
  --field: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.10);
  --rim: rgba(255, 255, 255, 0.16);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 40%);
  --text: #F2F5FF;
  --text-2: #A3ADD6;
  --primary: #3B6FDB;
  --primary-hover: #4F7FE3;
  --on-primary: #FFFFFF;
  --glow-primary: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 24px rgba(46, 91, 219, 0.45);
  --link: #7AA3F3;
  --sel-bg: rgba(255, 255, 255, 0.10);
  --sel-fg: #FFFFFF;
  --success: #5FE3D4;
  --success-bg: rgba(99, 214, 208, 0.14);
  --live: #3FD8CC;
  --warning: #FDB022;
  --warning-bg: rgba(60, 44, 14, 0.62);
  --error: #F97066;
  --error-bg: rgba(64, 24, 22, 0.62);
  --info: #7AA3F3;
  --info-bg: rgba(79, 139, 255, 0.16);
  --wave-off: rgba(255, 255, 255, 0.10);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 -1px 0 rgba(0, 0, 0, 0.25) inset, 0 20px 46px rgba(2, 4, 20, 0.42);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 2px 10px rgba(2, 4, 20, 0.30);
  --field-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
}