/* MoxuTools design tokens (from the UI redesign spec, section 3). Use the variables everywhere; no hard-coded colours in components.
   Dark is the default and only theme for now. Fonts are hosted on this site (not Google Fonts) so visitors make no third-party requests. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist-mono.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Surfaces */
  --bg:             #111315;
  --surface:        #171A1D;
  --surface-hover:  #1A1E22;
  --surface-raised: #1D2125;
  --input-bg:       #111315;

  /* Lines */
  --border:         #262B30;
  --border-subtle:  #22262B;
  --border-strong:  #2C3136;

  /* Text */
  --text:           #ECEEF0;
  --text-2:         #C9CED3;
  --text-muted:     #9BA3AB;
  --text-faint:     #7D858D;
  --icon-idle:      #5A6168;

  /* Brand */
  --accent:         #5AB8FF;
  --accent-hover:   #8FCFFF;
  --accent-ink:     #0B1620;
  --focus-ring:     rgba(90, 184, 255, 0.18);

  /* Status */
  --danger:         #FF8A80;

  /* Category colours (tile background = colour at 12% opacity) */
  --cat-money:      #4ADE9A;  --cat-money-bg:     rgba(74, 222, 154, 0.12);
  --cat-dates:      #F5B544;  --cat-dates-bg:     rgba(245, 181, 68, 0.12);
  --cat-files:      #7AA7FF;  --cat-files-bg:     rgba(122, 167, 255, 0.12);
  /* Added for the other categories, at similar brightness. Awaiting the owner's confirmation. */
  --cat-business:   #4FD1D9;  --cat-business-bg:  rgba(79, 209, 217, 0.12);
  --cat-freelance:  #B69CFF;  --cat-freelance-bg: rgba(182, 156, 255, 0.12);
  --cat-maths:      #FF8F7A;  --cat-maths-bg:     rgba(255, 143, 122, 0.12);
  --cat-science:    #F07AC0;  --cat-science-bg:   rgba(240, 122, 192, 0.12);

  /* Type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Radius */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* Layout */
  --content-width: 1120px;
  --gutter-mobile: 16px;
}

/* Each topic sets two variables, --c (colour) and --c-bg (tile fill); components only ever use those. */
[data-cat] { --c: var(--accent); --c-bg: var(--focus-ring); }
[data-cat="money"]                 { --c: var(--cat-money);     --c-bg: var(--cat-money-bg); }
[data-cat="everyday-calculations"] { --c: var(--cat-dates);     --c-bg: var(--cat-dates-bg); }
[data-cat="files"]                 { --c: var(--cat-files);     --c-bg: var(--cat-files-bg); }
[data-cat="business"]              { --c: var(--cat-business);  --c-bg: var(--cat-business-bg); }
[data-cat="freelance"]             { --c: var(--cat-freelance); --c-bg: var(--cat-freelance-bg); }
[data-cat="maths"]                 { --c: var(--cat-maths);     --c-bg: var(--cat-maths-bg); }
[data-cat="science"]               { --c: var(--cat-science);   --c-bg: var(--cat-science-bg); }