/* AI zonder stress: the design tokens from stylesheets/tokens.css with a
   cooler palette and its own list marker. Voorlopig, tot er een eigen
   ontwerp is. */
@layer tokens, base, components, pages;

@layer tokens {
  :root {
    --primary: #2C3E66;
    --primary-deep: #1E2C4D;
    --primary-soft: #3A4F7D;
    --on-primary: #F7F6F2;
    --on-primary-muted: #D5DBE8;

    --accent: #EADFC8;
    --accent-line: #CDB98F;
    --on-accent-muted: #3D3A33;
    --accent-strong: #7A4B12;

    --tint: #DDE3EC;
    --on-tint-muted: #2C3446;

    --canvas: #F7F6F2;
    --line: #D8D6CE;
    --track: #E4E2DA;

    --ink: #1C2233;
    --ink-soft: #2C3446;
    --muted: #4E5668;

    /* The line from the logo: busy, then calm. */
    --list-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 6.5 30 19'%3E%3Cpath d='M3.5 16 L5.3 9.5 L7.2 22.5 L9.1 12 L11 18.5 C13.5 12.5 16.5 19.5 19.8 16 C22.3 13.6 25.3 16.8 28.5 16' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --list-mark-width: 1.375rem;
  }
}