/* sails.ax colour tokens: loaded after sails-tokens.css and overrides only colours.
   Same pages, layout and components as sails.fi (see DESIGN.md §8); the palette comes from the sails.ax logo
   (red #d21034, yellow #ffd700). Contrast (WCAG AA) is noted per pair: text on card / on page. */
:root {
  --ax-red-50: #fff1f3;
  --ax-red-100: #ffdce2;
  --ax-red-300: #ff7b8c;
  --ax-red-500: #d21034;   /* logo red */
  --ax-red-600: #c8102e;
  --ax-red-800: #2e1418;
  --ax-red-900: #1a0b0e;
  --ax-gold-50: #fff6e0;
  --ax-gold-400: #ffd23f;
  --ax-gold-500: #ffd700;  /* logo yellow */
  --ax-gold-600: #f0b400;

  --sails-bg: var(--ax-gold-50);       /* warm cream page */
  --sails-card: #ffffff;
  --sails-text: #1f1416;               /* 17.9:1 / 16.7:1 */
  --sails-muted: #6b5651;              /* 6.8:1 / 6.3:1 */
  --sails-accent: var(--ax-red-600);   /* 5.9:1 / 5.5:1 */
  --sails-logo-1: var(--ax-red-500);
  --sails-logo-2: var(--ax-gold-500);
  --sails-card-accent: var(--ax-red-500);
  --sails-card-accent-hover: var(--ax-gold-600);
  --sails-focus: var(--ax-red-600);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sails-bg: var(--ax-red-900);     /* deep wine */
    --sails-card: var(--ax-red-800);
    --sails-text: #fbf1ec;             /* 15.4:1 / 17.2:1 */
    --sails-muted: #c9b2ab;            /* 8.5:1 / 9.5:1 */
    --sails-accent: var(--ax-red-300); /* 6.9:1 / 7.7:1 */
    --sails-logo-1: #e63946;
    --sails-logo-2: #ffdd44;
    --sails-card-accent: #e63946;
    --sails-card-accent-hover: #ffdd44;
    --sails-focus: var(--ax-gold-400); /* 11.8:1 on card */
  }
}