/* Core GUI variables */

:root {
  /* Change this hex color to recolor the interface and server-rendered assets. */
  --shadow-ink: #172b3c;
  /* Typography */
  --font-sans: 'Baloo', Arial, Helvetica, sans-serif;

  /* Green palette: use these for green accents throughout the app. */
  --available-dark: color-mix(in srgb, var(--brand-primary) 80%, black);
  --available-base: var(--brand-primary);
  --available-bright: var(--brand-primary);
  --available-slot: #B8DED5;
  --available-wash: color-mix(in srgb, var(--brand-primary) 7%, white);
  --available-success: var(--available-bright);

  /* Brand roles */
  --color-brand: var(--available-bright); /* Public components shared with beta-fr. */
  --brand-primary: #0d806c;
  --brand-soft: color-mix(in srgb, var(--brand-primary) 55%, white);
  --brand-surface-background: radial-gradient(ellipse 75% 85% at 80% 100%, color-mix(in srgb, var(--brand-soft) 18%, transparent) 0%, transparent 72%), var(--brand-primary);
  --brand-link: var(--available-dark);
  --brand-lightbg: var(--available-wash);
  --brand-lightbg-text: var(--available-dark);
  --brand-lightbg-border: color-mix(in srgb, var(--brand-primary) 18%, white);
  --brand-logo-height: 34px;

  /* Neutrals */
  --color-text: #202b3c;
  --color-text-strong: #111827;
  --color-text-muted: #506176;
  --color-text-soft: #8290a3;

  /* Surfaces */
  --bg-page: #f4f7fb;
  --bg-surface: #ffffff;
  --bg-surface-2: #f9fafb;
  --bg-surface-5: var(--available-wash);

  /* Borders */
  --border: #d5e1ed;
  --border-soft: var(--border);
  --border-surface-5: var(--brand-lightbg-border);

  /* Shadows */
  --shadow-soft: none;

  /* Buttons */
  --btn-bg: var(--brand-primary);
  --btn-text: #ffffff;

  /* Status / semantic */
  --success: var(--available-success);
  --connected: var(--available-success);
  --disconnected: #98a2b3;
  --warning: #f79009;
  --danger: #d92d20;

  /* Radius */
  --radius-md: 8px;
  --radius-lg: 16px;

}