/* Relay Design System tokens — combined from tokens/{colors,typography,spacing,effects}.css
 * Source of truth: the Relay Design System project (0e5eff0c). Do not hand-edit values. */
*, *::before, *::after { box-sizing: border-box; }
/* Relay — Color tokens
 * Brand sampled from the soundwave logo: bright blue, signal teal/green, deep navy.
 * Palette is calm + productivity-forward (white / soft gray canvas, navy ink, blue action, teal signal).
 */
:root {
  /* ----- Base neutrals: Ink (cool navy-slate) ----- */
  --ink-900: #0D1C3C; /* deep navy — primary text, inverse surfaces */
  --ink-800: #1B2B4D;
  --ink-700: #2E3F63;
  --ink-600: #45577A;
  --ink-500: #6B7A93; /* secondary text (tagline gray) */
  --ink-400: #8A97AE;
  --ink-300: #B4BECE;
  --ink-200: #D7DDE7;
  --ink-100: #E8ECF3;
  --ink-50:  #F2F5F9;

  --white:   #FFFFFF;
  --off-white: #FDFDFD;
  --canvas:  #F6F8FC; /* soft gray app background */

  /* ----- Brand blue (primary action) ----- */
  --blue-800: #073C82;
  --blue-700: #0A58B8;
  --blue-600: #0D7CFD; /* PRIMARY brand blue */
  --blue-500: #3D96FD;
  --blue-300: #9CC6FE;
  --blue-100: #E2EEFF;
  --blue-50:  #F0F6FF;

  /* ----- Signal teal / green (success, live audio) ----- */
  --teal-800: #007A66;
  --teal-700: #009B82;
  --teal-600: #01C8AC; /* signal teal — success / completed */
  --teal-500: #1FD6BC;
  --teal-400: #4AE1C3; /* light teal */
  --teal-100: #D4F7EF;
  --teal-50:  #EBFBF7;

  /* ----- Amber (on hold / needs input) ----- */
  --amber-700: #C77A00;
  --amber-600: #E89200;
  --amber-500: #F5A623;
  --amber-100: #FCEBCF;
  --amber-50:  #FEF7EA;

  /* ----- Red (failed / error) ----- */
  --red-700: #B62D31;
  --red-600: #D93A3F;
  --red-500: #E5484D;
  --red-100: #FBE0E1;
  --red-50:  #FDF0F1;

  /* ===== Semantic aliases ===== */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-tertiary:  var(--ink-400);
  --text-disabled:  var(--ink-300);
  --text-on-accent: var(--white);
  --text-on-dark:   var(--white);
  --text-link:      var(--blue-600);

  --surface-canvas:  var(--canvas);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-50);
  --surface-raised:  var(--white);
  --surface-inverse: var(--ink-900);
  --surface-hover:   var(--ink-50);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-focus:   var(--blue-600);

  --accent:         var(--blue-600);
  --accent-hover:   var(--blue-700);
  --accent-active:  var(--blue-800);
  --accent-subtle:  var(--blue-50);
  --accent-subtle-fg: var(--blue-700);

  --signal:         var(--teal-600);
  --signal-subtle:  var(--teal-50);
  --signal-subtle-fg: var(--teal-800);

  /* Call / task status */
  --status-progress: var(--blue-600);   /* calling / in progress */
  --status-live:     var(--teal-600);   /* speaking / connected */
  --status-hold:     var(--amber-500);  /* on hold */
  --status-success:  var(--teal-600);   /* completed */
  --status-error:    var(--red-500);    /* failed */
  --status-attention:var(--amber-500);  /* needs user input */
  --status-idle:     var(--ink-400);    /* scheduled / queued */

  --focus-ring: 0 0 0 3px rgba(13, 124, 253, 0.32);
}
/* Relay — Typography tokens */
:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale (px) — calm, generous, app + marketing */
  --fs-display: 44px;   /* hero / marketing */
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 21px;
  --fs-title: 17px;     /* card / row titles */
  --fs-body: 15px;      /* default UI body */
  --fs-body-lg: 16px;
  --fs-label: 13px;     /* labels, meta */
  --fs-caption: 12px;   /* timestamps, helper */
  --fs-micro: 11px;     /* uppercase eyebrows */

  /* Line heights */
  --lh-tight: 1.12; /* @kind other */
  --lh-snug: 1.3; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-relaxed: 1.62; /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.02em; /* @kind other */
  --ls-snug: -0.01em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.06em; /* @kind other */
}
/* Relay — Spacing & layout tokens
 * 4px base grid. Calm, roomy density (closer to Asana/Linear than dense data tools).
 */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 128px;

  /* Container widths */
  --container-app: 420px;   /* mobile app frame */
  --container-content: 720px;
  --container-wide: 1120px;

  /* Component sizing */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
}
/* Relay — Radius, borders, shadows, motion
 * Soft, friendly corners. Shadows are low, diffuse and cool-tinted (navy), never harsh.
 */
:root {
  /* Corner radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;   /* default control / chip */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 22px;   /* sheets, large cards */
  --radius-2xl: 28px;
  --radius-pill: 999px; /* signal bars, status pills, avatars */

  /* Borders */
  --border-width: 1px; /* @kind other */
  --border-hairline: 1px solid var(--border-subtle); /* @kind other */
  --border-card: 1px solid var(--border-subtle); /* @kind other */

  /* Shadows — cool navy tint, soft + diffuse */
  --shadow-xs: 0 1px 2px rgba(13, 28, 60, 0.06);
  --shadow-sm: 0 1px 3px rgba(13, 28, 60, 0.08), 0 1px 2px rgba(13, 28, 60, 0.04);
  --shadow-md: 0 4px 14px rgba(13, 28, 60, 0.08), 0 1px 3px rgba(13, 28, 60, 0.05);
  --shadow-lg: 0 12px 32px rgba(13, 28, 60, 0.12), 0 2px 8px rgba(13, 28, 60, 0.06);
  --shadow-xl: 0 24px 60px rgba(13, 28, 60, 0.18), 0 6px 16px rgba(13, 28, 60, 0.08);
  --shadow-accent: 0 6px 18px rgba(13, 124, 253, 0.30); /* raised primary button */
  --shadow-signal: 0 6px 18px rgba(1, 200, 172, 0.28);

  /* Motion — calm, no bounce. Material-ish standard easing. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}