/* Lichter door het najaar: the design tokens from stylesheets/tokens.css with
   an autumn palette (deep forest green with a warm lamplight amber) and a
   small leaf as list marker.
   Voorlopig, tot er een eigen ontwerp is. */
@layer tokens, base, components, pages;

@layer tokens {
  :root {
    --primary: #2F4A3E;
    --primary-deep: #22372D;
    --primary-soft: #3E5E50;
    --on-primary: #FFFFFF;
    --on-primary-muted: #D5E2DA;

    --accent: #F2B33D;
    --accent-line: #D9962A;
    --on-accent-muted: #4A3208;
    --accent-strong: #8F5A0B;

    --tint: #F5EEE2;
    --on-tint-muted: #4D4136;

    --canvas: #FBF7F0;
    --line: #E6DCCB;
    --track: #EEE5D6;

    --ink: #1F2A24;
    --ink-soft: #2F3B34;
    --muted: #5A665F;

    /* A small leaf. */
    --list-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 116 300 300'%3E%3Cpath d='M138 378 C 138 226 236 132 386 128 C 386 278 292 374 138 378 Z'/%3E%3Cpath d='M146 370 L 112 404' stroke='%23000' stroke-width='24' stroke-linecap='round'/%3E%3C/svg%3E");
    --list-mark-width: 0.875rem;
  }
}

/* A few shades in components.css and lesson.css are fixed for the default
   palette; match them to forest green and amber. */
@layer components {
  .button--accent:hover { background: #E8A42A; color: var(--ink); }
}

@layer pages {
  .now--offer:hover, .offer-strip:hover { background: #E8A42A; color: var(--ink); }
}