/* League Office design tokens. The only file with colour literals (CLAUDE.md).
   Dark first; light is the alternate theme, switched by [data-theme="light"]. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-latin-800-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* surfaces */
  --bg-deep: #0B1019;
  --bg: #0E131C;
  --nav-bg: #111827;
  --surface: #161E2C;
  --surface-inset: #121927;
  --surface-soft: #141B28;
  --surface-raised: #1A2232;
  --control: #1F2838;
  --hover: #18212F;
  --selected: #1C2A3A;
  --seg-on: #243049;

  /* lines */
  --line: #232E42;
  --line-soft: #1C2537;
  --line-top: #1E2738;
  --line-strong: #2A3550;
  --line-hover: #34445F;

  /* text */
  --text: #E8EDF5;
  --text-2: #C7D0DE;
  --muted: #93A0B5;
  --faint: #8592A8;
  --dim: #8794AA;
  --none: #8190A8;

  /* accent (mint) */
  --accent: #2EE6B0;
  --accent-hover: #7FF2D0;
  --on-accent: #06231A;
  --accent-tint: rgba(46, 230, 176, .12);   /* selected rows and chips */
  --link: #2EE6B0;
  --focus: #7FF2D0;

  /* semantic */
  --ok: #5FEBC2;        --ok-bg: rgba(46, 230, 176, .13);   --ok-line: rgba(46, 230, 176, .28);
  --tight: #F7C86E;     --tight-bg: rgba(245, 181, 68, .15); --tight-line: rgba(245, 181, 68, .32);
  --over: #FF8F99;      --over-bg: rgba(255, 92, 108, .16);  --over-line: rgba(255, 92, 108, .32);
  --info: #9CCBFF;      --info-bg: rgba(108, 178, 255, .14);
  --violet: #CDBDFF;    --violet-bg: rgba(155, 125, 255, .16);
  --neutral: #C7D0DE;   --neutral-bg: #2A3040;
  --dot-over: #FF5C6C;  --dot-over-ring: rgba(255, 92, 108, .2);
  --eaten-text: #B5A8FF;
  --danger: #FFB3BA;    --danger-bg: #3D1E26; --danger-line: #5A2A35;

  /* cap bar segments */
  --seg-salary: #2EE6B0;
  --seg-dead: #FF6B78;
  --seg-eaten: #8C7BFF;
  --seg-adj: #F5B544;
  --seg-ir-a: #3A4A63;
  --seg-ir-b: #24304A;
  --seg-track: #0F1522;
  --seg-ir-key: #4A5A75;

  /* event kinds */
  --k-trade: #CDBDFF;  --k-trade-bg: #2A2448;
  --k-drop: #FFC58A;   --k-drop-bg: #3A2A1E;
  --k-ir: #9CCBFF;     --k-ir-bg: #22314B;
  --k-sign: #5FEBC2;   --k-sign-bg: #173A33;
  --k-vio: #FF8F99;    --k-vio-bg: #3D1E26;
  --k-misc: #C7D0DE;   --k-misc-bg: #2A3550;

  /* positions (fantasy-standard) */
  --pos-qb: #FF7A9A; --pos-rb: #3FD9C2; --pos-wr: #6CB2FF; --pos-te: #FFB768;
  --pos-k: #CF8CFF;  --pos-def: #C9957F; --pos-other: #9FB4D6; --on-pos: #0B1019;

  /* commissioner tint */
  --commish-top: #18142B;
  --commish-line: #2C2547;
  --commish-side: #151227;

  /* overlays */
  --toast-bg: #E8EDF5; --toast-text: #0E131C;
  --pill-on-bg: #E8EDF5; --pill-on-text: #0E131C;
  --scrim: rgba(4, 7, 12, .66);
  --shadow: 0 8px 24px rgba(0, 0, 0, .4);
  --avatar-text: #0B1019;
  --on-dot: #0B1019;      /* text on the red count badge */

  /* shape */
  --r-card: 14px; --r-ctl: 10px; --r-chip: 999px; --r-tag: 6px;
  --tabbar-h: 63px;               /* the phone tab bar; the page keeps this much clear at the bottom */
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-deep: #E9EDF3;
  --bg: #F3F5F9;
  --nav-bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-inset: #F3F5F9;
  --surface-soft: #F7F8FB;
  --surface-raised: #EEF1F6;
  --control: #EEF1F6;
  --hover: #F1F4F8;
  --selected: #E3F6EF;
  --seg-on: #FFFFFF;

  --line: #D9DFE8;
  --line-soft: #E6EAF0;
  --line-top: #DDE2EA;
  --line-strong: #C8D0DC;
  --line-hover: #AEB9C9;

  --text: #0E131C;
  --text-2: #2B3546;
  --muted: #566274;
  --faint: #5F6B7D;
  --dim: #5A6678;
  --none: #5F6B7E;

  --accent: #0A7456;
  --accent-hover: #075A42;
  --on-accent: #FFFFFF;
  --accent-tint: rgba(11, 127, 95, .10);
  --link: #08715A;
  --focus: #0A7456;

  --ok: #0A6E52;        --ok-bg: rgba(11, 127, 95, .10);   --ok-line: rgba(11, 127, 95, .30);
  --tight: #845400;     --tight-bg: rgba(204, 138, 0, .14); --tight-line: rgba(204, 138, 0, .35);
  --over: #B42335;      --over-bg: rgba(214, 48, 69, .10);  --over-line: rgba(214, 48, 69, .32);
  --info: #1B5AA6;      --info-bg: rgba(40, 110, 200, .10);
  --violet: #5536B8;    --violet-bg: rgba(110, 80, 220, .10);
  --neutral: #2B3546;   --neutral-bg: #E6EAF0;
  --dot-over: #D63045;  --dot-over-ring: rgba(214, 48, 69, .18);
  --eaten-text: #5536B8;
  --danger: #9E1B2C;    --danger-bg: #FBE7EA; --danger-line: #F1C2C9;

  --seg-salary: #13B287;
  --seg-dead: #E2475A;
  --seg-eaten: #7462E8;
  --seg-adj: #D99A1E;
  --seg-ir-a: #C3CCDA;
  --seg-ir-b: #E1E6EE;
  --seg-track: #E7EBF1;
  --seg-ir-key: #AEB9C9;

  --k-trade: #4A2FA8;  --k-trade-bg: #ECE7FD;
  --k-drop: #8A4B00;   --k-drop-bg: #FCEBD8;
  --k-ir: #1B5AA6;     --k-ir-bg: #E3EEFB;
  --k-sign: #0A6E52;   --k-sign-bg: #DDF4EC;
  --k-vio: #A51F31;    --k-vio-bg: #FBE3E6;
  --k-misc: #2B3546;   --k-misc-bg: #E6EAF0;

  --commish-top: #F1ECFF;
  --commish-line: #DCD2FA;
  --commish-side: #F7F4FF;

  --on-dot: #FFFFFF;
  --toast-bg: #0E131C; --toast-text: #FFFFFF;
  --pill-on-bg: #0E131C; --pill-on-text: #FFFFFF;
  --scrim: rgba(14, 19, 28, .45);
  --shadow: 0 8px 24px rgba(14, 19, 28, .16);
}