/* Läxhjälpen design tokens */
:root {
  /* brand */
  --cyan: #00BDFA;
  --cyan-dark: #009FD6;
  --cyan-deep: #0084B8;
  --ink: #0D1B22;
  --muted: #5B7079;
  --bg: #F4F9FB;
  --card: #FFFFFF;
  --ok: #19B877;
  --warn: #F5A623;
  --bad: #E5484D;
  --grey: #9DB3BB;
  --head: #0D2530;

  /* surfaces */
  --line: #E3EDF1;
  --cyan-050: #EEF7FB;
  --cyan-100: #E4F6FD;
  --ok-100: #E2F7EE;
  --warn-100: #FFF9EC;
  --bad-100: #FFE8E9;

  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;

  /* shadows */
  --shadow-sm: 0 1px 3px rgba(13, 60, 80, .06);
  --shadow: 0 4px 24px rgba(13, 60, 80, .08), 0 1px 3px rgba(13, 60, 80, .06);
  --shadow-lg: 0 12px 48px rgba(13, 60, 80, .14);

  /* type */
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /* motion */
  --t-fast: .15s ease;
  --t-view: .35s cubic-bezier(.22, 1, .36, 1);

  /* layout */
  --sidebar-w: 240px;
  --sidebar-w-rail: 68px;
  --topbar-h: 60px;
}