/*
 * The design system's tokens and its smallest shared pieces.
 *
 * Split out of console.css so the specialist's call screen can use them
 * WITHOUT inheriting the console shell. index.html is a different app — its
 * own sign-in, agenda and history views are styled by styles.css — and
 * console.css sets `body` and `#app` for a page that is nothing but the
 * console. Linking the whole of it there would restyle four screens to fix
 * one.
 *
 * The alternative was a second copy of the palette. A colour with two
 * definitions has no definition, so: one file, linked by both.
 */

:root {
  --color-bg: #F7F8FC;
  --color-surface: #EBEEF7;
  --color-text: #1F2338;
  --color-accent: #303F8D;
  --color-accent-2: #0FB6A4;
  --color-divider: #DCE1F0;
  --color-neutral-100: #F2F4FB;
  --color-neutral-200: #E6EAF6;
  --color-neutral-300: #CFD6EA;
  --color-neutral-400: #A7AEC6;
  --color-neutral-500: #8B91A6;
  --color-neutral-600: #717483;
  --color-neutral-700: #5C6490;
  --color-neutral-800: #3E4673;
  --color-neutral-900: #1F2338;
  --color-accent-100: #EBEEF7;
  --color-accent-200: #DBE1F4;
  --color-accent-300: #BFC8E9;
  --color-accent-400: #8F9CD4;
  --color-accent-500: #5B6BBB;
  --color-accent-600: #303F8D;
  --color-accent-700: #293160;
  --color-accent-800: #252C55;
  --color-accent-900: #1F2338;
  --color-accent-2-100: #E8FFFC;
  --color-accent-2-200: #CFFFF9;
  --color-accent-2-300: #8FFFF1;
  --color-accent-2-400: #3EFFEC;
  --color-accent-2-500: #16D6C2;
  --color-accent-2-600: #0FB6A4;
  --color-accent-2-700: #0C8A7D;
  --color-accent-2-800: #0A6258;
  --color-accent-2-900: #0A4038;
  --font-heading: "Aeonik", "Helvetica Neue", Arial, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Aeonik", "Helvetica Neue", Arial, sans-serif;

  --color-warning: #F5A524;
  --color-warning-100: #FFF6E5;
  --color-warning-200: #FFE7BF;
  --color-warning-400: #F5A524;
  --color-warning-700: #9A5E00;
  --color-warning-900: #5C3800;
  --color-danger: #D8232A;
  --color-danger-100: #FDECEC;
  --color-danger-200: #FAD3D4;
  --color-danger-400: #E8595E;
  --color-danger-600: #C01D24;
  --color-danger-700: #9A171D;
  --color-danger-900: #5E0F13;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(31, 35, 56, .12);
  --shadow-md: 0 4px 14px rgba(31, 35, 56, .14);
  --shadow-lg: 0 14px 40px rgba(31, 35, 56, .20);
}

.hidden { display: none !important; }

/* --- components carried over from the design system ---------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
  font-weight: 700;
}

.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.tag-warning { background: var(--color-warning-100); color: var(--color-warning-700); }
.tag-danger { background: var(--color-danger-100); color: var(--color-danger-700); }

/* The canvas expressed hover as a `style-hover` attribute on each element.
   These are those rules, one per distinct declaration, addressed by the
   data attribute the conversion left behind. */
[data-hv="hv1"]:hover { border-color: var(--color-accent-500); background: var(--color-accent-100); }
[data-hv="hv2"]:hover { background: var(--color-neutral-200); }
[data-hv="hv3"]:hover { background: var(--color-accent-600); }
[data-hv="hv4"]:hover { background: var(--color-accent-100); }
[data-hv="hv5"]:hover { background: var(--color-accent-900); }
[data-hv="hv6"]:hover { background: var(--color-accent-300); }
[data-hv="hv7"]:hover { background: var(--color-neutral-100); }
[data-hv="hv8"]:hover { filter: brightness(.97); }
[data-hv="hv9"]:hover { background: var(--color-danger-100); }
[data-hv="hv10"]:hover { background: var(--color-neutral-300); }
[data-hv="hv11"]:hover { background: var(--color-danger-200); }
[data-hv="hv12"]:hover { background: var(--color-danger-600); }
[data-hv="hv13"]:hover { border-color: var(--color-accent-500); }

button:disabled { cursor: not-allowed; opacity: .55; }