@font-face {
  font-family: "Figtree"; src: url("../fonts/Figtree.ttf") format("truetype");
  font-style: normal; font-weight: 300 900; font-display: swap;
}

:root {
  --ground: #EBEEF5;
  --wash: linear-gradient(180deg,#F6F8FD 0%,#EBEEF5 46%,#E2E7F1 100%);
  --panel: #FFFFFF;
  --panel-quiet: #F6F8FC;
  --inset: #E7EBF4;
  --hover: #EDF0F7;
  --scroll: #C4CBDC; --scroll-hover: #A4ADC5;

  --ink: #131721;
  --ink-dim: #4C5468;
  --ink-faint: #5E6980;

  --accent: #1E51DE;
  --accent-hi: #1845C6;
  --accent-fill: linear-gradient(140deg,#3566E4 0%,#1E51DE 56%,#1A45CC 100%);
  --accent-fill-hi: linear-gradient(140deg,#3566E4 0%,#2456D8 56%,#1E4CD8 100%);
  --accent-ink: #1A48C6;
  --accent-wash: #DFE6FB;
  --accent-ring: rgba(30,81,222,.24);
  --on-accent: #FFFFFF;

  --live: #CE5480;
  --live-ink: #A73560;
  --live-wash: #FAE5ED;
  --live-ring: rgba(206,84,128,.4);
  --fault: #B3312C;

  --human: #DADEEA; --on-human: #3E4557;
  --bot: #1E51DE;   --on-bot: #FFFFFF;

  --brand-mark: linear-gradient(145deg,#5183F5 0%,#1E51DE 52%,#1A45CC 135%);
  --brand-glow: 0 2px 10px rgba(30,81,222,.36);
  --head-wash: linear-gradient(180deg,#F0F3FC 0%,#FFFFFF 100%);

  --rim: inset 0 1px 0 rgba(255,255,255,.78);
  --lift-sm: 0 1px 2px rgba(19,23,33,.07), 0 2px 6px rgba(19,23,33,.06);
  --lift:    0 2px 4px rgba(19,23,33,.07), 0 8px 22px rgba(19,23,33,.07);
  --lift-hi: 0 4px 10px rgba(19,23,33,.08), 0 18px 46px rgba(19,23,33,.09);
  --accent-lift:    0 2px 6px rgba(30,81,222,.26), 0 8px 20px rgba(30,81,222,.2);
  --accent-lift-hi: 0 4px 10px rgba(30,81,222,.3), 0 14px 32px rgba(30,81,222,.24);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ground: #080A11;
  --wash: radial-gradient(130% 75% at 50% 0%,#15203E 0%,#0C1020 46%,#07080E 100%);
  --panel: #131725;
  --panel-quiet: #0F121D;
  --inset: #1B2032;
  --hover: #1F2539;
  --scroll: #323A54; --scroll-hover: #454F6E;

  --ink: #E9ECF5;
  --ink-dim: #A4ABC1;
  --ink-faint: #9BA5BF;

  --accent: #6E93FF;
  --accent-hi: #86A6FF;
  --accent-fill: linear-gradient(140deg,#86A6FF 0%,#6E93FF 56%,#5A82F5 100%);
  --accent-fill-hi: linear-gradient(140deg,#98B4FF 0%,#7E9FFF 56%,#6B8FFA 100%);
  --accent-ink: #9AB4FF;
  --accent-wash: #1C2543;
  --accent-ring: rgba(110,147,255,.3);
  --on-accent: #050B1E;

  --live: #F08EB2;
  --live-ink: #F6A9C5;
  --live-wash: #2F1C28;
  --live-ring: rgba(240,142,178,.36);
  --fault: #F07E79;

  --human: #232941; --on-human: #C7CEE2;
  --bot: #6E93FF;   --on-bot: #050B1E;

  --brand-mark: linear-gradient(145deg,#9AB4FF 0%,#6E93FF 52%,#5A82F5 135%);
  --brand-glow: 0 2px 14px rgba(110,147,255,.45);
  --head-wash: linear-gradient(180deg,#1A2135 0%,#131725 100%);

  --rim: inset 0 1px 0 rgba(255,255,255,.06);
  --lift-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --lift:    0 2px 4px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.4);
  --lift-hi: 0 4px 10px rgba(0,0,0,.5), 0 18px 46px rgba(0,0,0,.45);
  --accent-lift:    0 2px 8px rgba(0,0,0,.45), 0 8px 22px rgba(36,60,145,.35);
  --accent-lift-hi: 0 4px 12px rgba(0,0,0,.5), 0 14px 34px rgba(36,60,145,.4);
  color-scheme: dark;
}

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 44px;
  --r1: 10px; --r2: 16px; --r3: 999px;
  --font-ui: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --text-xs: .75rem; --text-sm: .8125rem; --text-base: .9375rem;
  --text-lg: 1.1875rem; --text-title: 1.4375rem; --text-display: 1.75rem;
  --weight-normal: 400; --weight-medium: 500; --weight-strong: 600;
  --leading: 1.62; --leading-tight: 1.25;
  --ease: cubic-bezier(.2,.9,.25,1); --duration: 180ms;
  --rail-width: 296px; --detail-min: 384px; --detail-max: 560px;
  --control: 44px; --avatar: 28px; --portrait: 80px;
  --measure: 70ch; --form-width: 640px;
  --line: color-mix(in srgb, var(--ink) 13%, transparent);
  --fault-wash: color-mix(in srgb, var(--fault) 10%, var(--panel));
  --scrim: color-mix(in srgb, var(--ground) 55%, transparent);
}