/* Turbobrein: the design tokens from stylesheets/tokens.css with a dark,
   grown-up palette (near-black aubergine with a lime accent) and a lightning
   bolt as list marker.
   Voorlopig, tot er een eigen ontwerp is. */
@layer tokens, base, components, pages;

@layer tokens {
  :root {
    --primary: #1C1530;
    --primary-deep: #120D20;
    --primary-soft: #2E2448;
    --on-primary: #FFFFFF;
    --on-primary-muted: #CFC6E4;

    --accent: #D2F25C;
    --accent-line: #9CC21E;
    --on-accent-muted: #2F3A0C;
    --accent-strong: #5B3BB0;

    --tint: #F1EEF7;
    --on-tint-muted: #3A2A5C;

    --canvas: #FBFAFD;
    --line: #DED6F0;
    --track: #E9E3F6;

    --ink: #1E1433;
    --ink-soft: #33244F;
    --muted: #5B5274;

    /* A small lightning bolt. */
    --list-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2 L5 13.5 H11 L9.5 22 L19 9.5 H13 Z' fill='%23000'/%3E%3C/svg%3E");
    --list-mark-width: 1.125rem;
  }
}