/* Call State design tokens. Brand colors follow docs/BRAND.md.
   The landing loads this file before main.css. The account app pulls it in with Sass @use.
   Every spacing, radius, font size and color in those styles uses a token from here.
   Breakpoints stay literal, because CSS variables do not work in @media: 600px, 900px, 1100px. */
:root {
  /* Brand and status */
  --brand: #0EA5A5;
  --brand-light: #2DD4BF;
  --teal-ink: #076F6D;
  --available: #22C55E;
  --in-call: #EF4444;
  --in-call-ink: #B91C1C;
  --ringing: #F59E0B;
  --teams: #5B5FC7;

  /* Light surfaces */
  --paper: #F7F8F5;
  --white: #FFFFFF;
  --surface: #FCFDFA;
  --soft: #EDF1EB;
  --tint: #EAF3ED;
  --tint-strong: #E4F0E4;
  --selection: #BBE9DC;

  /* Light lines */
  --line: #DCE3DD;
  --line-strong: #C9D4CC;
  --line-tint: #B9D5CC;
  --line-tint-strong: #AACABD;
  --line-accent: #8BB8A5;
  --line-dashed: #A9B5AE;

  /* Light text */
  --ink: #182C29;
  --ink-2: #3C584B;
  --ink-green: #234A3C;
  --muted: #5D6B66;
  --muted-2: #546D5B;
  --subtle: #8A9A91;

  /* Dark surfaces and lines */
  --dark: #132B27;
  --dark-raised: #183630;
  --dark-hover: #1D3F38;
  --dark-line-solid: #476459;
  --dark-line: #819C8733;
  --dark-line-strong: #ECF2E933;

  /* Dark text */
  --on-dark: #ECF2E9;
  --on-dark-2: #B9CAC0;
  --on-dark-3: #8FA79A;
  --on-dark-mint: #AFCDBB;
  --on-dark-accent: #9EDFC7;
  --on-dark-label: #79D9C6;

  /* Alpha and effects */
  --brand-light-30: #2DD4BF4D;
  --brand-light-45: #2DD4BF73;
  --brand-light-65: #2DD4BFA6;
  --brand-glow-18: #0EA5A52E;
  --brand-glow-30: #0EA5A54D;
  --brand-glow-60: #0EA5A599;
  --in-call-wash: #EF444422;
  --in-call-glow: #EF444438;
  --available-wash: #22C55E22;
  --ringing-wash: #F59E0B22;
  --shadow-ink-6: #182C2910;
  --shadow-ink-10: #182C291A;
  --shadow-ink-12: #182C2920;
  --shadow-black-20: #00000033;
  --white-3: #FFFFFF08;
  --white-50: #FFFFFF80;
  --white-60: #FFFFFF99;
  --paper-95: #F7F8F5F2;
  --line-60: #DCE3DD99;
  --deco-ring: #B8D2BA12;
  --deco-ring-faint: #B8D2BA05;

  /* Illustration: deck pad (draws a physical object, exact values) */
  --deck-body: #27362F;
  --deck-border: #455248;
  --deck-key: #38473C;
  --deck-key-border: #58665A;
  --deck-key-blank: #2D3C32;
  --deck-key-fg: #B5C3AF;
  --deck-key-active: #0C7571;
  --deck-key-active-border: #479C91;
  --deck-key-active-fg: #DDF5EB;
  --deck-shadow: #BAC2B4;
  --deck-drop: #35492C15;

  /* Illustration: finale LED sign */
  --sign-top: #1C2826;
  --sign-bottom: #0D1715;
  --sign-edge: #040706;
  --sign-matrix: #050808;
  --sign-shadow: #000000E6;
  --sign-inset: #000000F2;
  --sign-highlight: #FFFFFF12;
  --sign-dot: #FFFFFF0F;
  --sign-glow-near: #EF4444F2;
  --sign-glow-far: #EF44448C;

  /* Illustration: demo scene */
  --dot-grid: #76968940;

  /* Spacing: 4px unit; --space-N is N units. 0-5 is 2px, 1-5 is 6px. */
  --space-unit: 4px;
  --space-0-5: calc(0.5 * var(--space-unit));
  --space-1: calc(1 * var(--space-unit));
  --space-1-5: calc(1.5 * var(--space-unit));
  --space-2: calc(2 * var(--space-unit));
  --space-3: calc(3 * var(--space-unit));
  --space-4: calc(4 * var(--space-unit));
  --space-5: calc(5 * var(--space-unit));
  --space-6: calc(6 * var(--space-unit));
  --space-7: calc(7 * var(--space-unit));
  --space-8: calc(8 * var(--space-unit));
  --space-10: calc(10 * var(--space-unit));
  --space-12: calc(12 * var(--space-unit));
  --space-14: calc(14 * var(--space-unit));
  --space-16: calc(16 * var(--space-unit));
  --space-18: calc(18 * var(--space-unit));
  --space-20: calc(20 * var(--space-unit));
  --space-24: calc(24 * var(--space-unit));

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-round: 50%;

  /* Type scale */
  --text-1: 9px;
  --text-2: 10px;
  --text-3: 11px;
  --text-4: 12px;
  --text-5: 13px;
  --text-6: 14px;
  --text-7: 16px;
  --text-8: 18px;
  --text-9: 21px;
  --text-10: 30px;
  --text-11: 36px;
  --text-12: 45px;
  --text-13: 52px;
  --text-14: 64px;
  --text-hero: clamp(var(--text-12), 4.5vw, var(--text-14));
  --text-hero-sm: clamp(var(--text-11), 9.3vw, var(--text-13));
  /* Finale LED sign: literal on purpose. */
  --text-sign: clamp(58px, 10vw, 140px);

  /* Fonts */
  --body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --display: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}