:root {
      --canvas: #F2F1FA;
      --panel: #FFFFFF;
      --panel-alt: #F7F6FD;
      --panel-raised: #FFFFFF;
      --line: rgba(48, 38, 99, 0.08);
      --line-strong: rgba(48, 38, 99, 0.14);
      --ink: #2E2A47;
      --ink-dim: #6E698A;
      --muted: #A19DBD;
      --brass: #7C5CFC;
      --brass-soft: rgba(124, 92, 252, 0.12);
      --teal: #17C3B2;
      --coral: #b34d4d;
      --violet: #9B6BFF;
      --sky: #4CB8FF;
      --amber: #FFB020;
      --good: #22C55E;
      --proton: #c8bef0;
      --radius-s: 8px;
      --radius-m: 14px;
      --radius-l: 20px;
      --font-display: 'Poppins', sans-serif;
      --font-body: 'Inter', sans-serif;
      --font-mono: 'Inter', sans-serif;
      --shadow-card: 0 2px 6px rgba(48, 38, 99, 0.05), 0 14px 28px rgba(48, 38, 99, 0.07);

      --happy: #50af73;
      --soso: #e2aa42;
      --sad: #3f518d;
      --depressed: #634da0;
      --sick: #a54b44;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }

    *::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }

    *::-webkit-scrollbar-track {
      background: transparent;
    }

    *::-webkit-scrollbar-thumb {
      background: var(--line-strong);
      border-radius: 20px;
      border: 2px solid var(--panel);
      background-clip: padding-box;
    }

    *::-webkit-scrollbar-thumb:hover {
      background: var(--muted);
    }

    body {
      background:
        radial-gradient(ellipse at top left, rgba(124, 92, 252, 0.06), transparent 45%),
        radial-gradient(ellipse at bottom right, rgba(23, 195, 178, 0.05), transparent 45%),
        var(--canvas);
      color: var(--ink);
      font-family: var(--font-body);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      cursor: default;
    }

    ::selection {
      background: var(--brass-soft);
    }

    button {
      font-family: inherit;
      cursor: pointer;
    }

    input,
    select,
    textarea {
      font-family: inherit;
    }

    h1,
    h2,
    h3 {
      font-family: var(--font-display);
      margin: 0;
    }

    a {
      color: inherit;
    }

    :focus-visible {
      outline: 2px solid var(--brass);
      outline-offset: 2px;
    }