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

/* Design tokens: colours, radii, shared values. Change the look of the whole site here.
   Theme: navy (trust, calm) for structure and links, red ONLY for real alarms and danger,
   amber for warnings and highlights, green for done. Dark mode: <html data-theme="dark">. */
:root {
  color-scheme: light;
  --navy: #12275E;            /* sidebar, headings of the brand */
  --navy-dark: #0B1B3F;
  --navy-light: #1C3A80;
  --accent: #1F4FD8;          /* buttons, links, active states */
  --accent-dark: #1A42B3;
  --accent-soft: #E8EEFD;
  --on-accent: #FFFFFF;
  --bg: #F3F6FB;
  --card: #FFFFFF;
  --soft: #EEF2F9;            /* quiet fills: table headers, chips, bars */
  --soft2: #E2E8F3;
  --border: #DCE3EE;
  --line-strong: #C5CFDF;
  --text: #0F1B2D;
  --text-muted: #566579;
  --side-text: #B9C6E4;
  --side-muted: #7F90B5;
  --green: #15803D;   --green-bg: #E4F5EA;  --green-line: #B7E1C5;
  --blue: #1F4FD8;    --blue-bg: #E8EEFD;   --blue-line: #BCCDF7;
  --amber: #A15C00;   --amber-bg: #FEF1D8;  --amber-line: #F2D49A;
  --red: #C62828;     --red-bg: #FDEBEB;    --red-line: #F2BDBD;  --red-text: #7F1D1D;
  --purple: #6D45D6;  --purple-bg: #EFEAFC;
  --cyan: #0B7F9C;    --cyan-bg: #E0F3F8;
  --gray-bg: #EDF0F5;
  --pulse: #FFC24B;           /* brand amber: alarm dot, active-nav marker */
  --radius-control: 12px;
  --shadow-1: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 3px rgba(15, 27, 45, .05);
  --shadow-2: 0 8px 24px rgba(15, 27, 45, .12);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --export-green: #14532D;
  --export-green-hover: #0F3D22;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #070D1A;
  --navy-dark: #050A14;
  --navy-light: #12203F;
  --accent: #3F67EA;
  --accent-dark: #5B80F2;
  --accent-soft: #1A2850;
  --on-accent: #FFFFFF;
  --bg: #0A1120;
  --card: #111B30;
  --soft: #182440;
  --soft2: #22304C;
  --border: #22304C;
  --line-strong: #31436A;
  --text: #E7EDF9;
  --text-muted: #9DAAC4;
  --side-text: #B9C6E4;
  --side-muted: #7F90B5;
  --green: #6FD596;   --green-bg: #0F2D1C;  --green-line: #1D5133;
  --blue: #8FAAFF;    --blue-bg: #1A2850;   --blue-line: #2D4388;
  --amber: #F6BC66;   --amber-bg: #36270D;  --amber-line: #6B4D14;
  --red: #FF9494;     --red-bg: #3A1416;    --red-line: #6E2A2E;  --red-text: #FFC9C9;
  --purple: #B9A2FF;  --purple-bg: #2A1F52;
  --cyan: #6CD3EC;    --cyan-bg: #0E2E38;
  --gray-bg: #1B2640;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .5);
  --export-green: #1E7A43;
  --export-green-hover: #26964F;
}