/* Semantic roles. Components use these, never the raw brand colours, so the
   same markup works on a cream page and inside a forest (reverse) surface.
   They are also the theme contract: another brand's design system defines the
   same roles with its own values (see tokens/contract.json and the README).

   Proportion from the guidelines: about 60% cream, 30% forest, 10% yellow.
   Yellow is the accent and stands for "the day you get back". Keep it rare. */

:root,
.fd-light,
[data-surface='light'] {
  --bg: var(--color-cream);
  --surface: var(--color-white);
  --surface-edge: var(--shadow-hairline);

  --heading: var(--color-forest);
  --text: var(--color-ink);
  --text-strong: var(--color-forest);
  /* Forest at 75%: 5.3:1 on cream, 5.7:1 on white (AA). */
  --text-muted: rgba(30, 58, 44, 0.75);

  --border: var(--line);
  --border-subtle: var(--line-subtle);
  --border-strong: var(--line-strong);

  /* Primary action: forest on cream. */
  --action-bg: var(--color-forest);
  --action-fg: var(--color-cream);
  --action-bg-hover: color-mix(in srgb, var(--color-forest) 86%, #000);

  /* Accent: yellow fills only, with forest on top. Never yellow text here (1.5:1). */
  --accent-bg: var(--color-yellow);
  --accent-fg: var(--color-forest);
  --accent-bg-hover: color-mix(in srgb, var(--color-yellow) 88%, #fff);

  --link: var(--color-forest);
  --link-hover: #000;

  --danger: var(--color-error);
  --danger-fg: var(--color-white);
  --focus: var(--color-forest);
  --focus-gap: var(--color-cream);

  /* Checkboxes and radios: forest on cream, yellow on forest. */
  --choice-accent: var(--color-forest);

  --selection-bg: var(--color-yellow);
  --selection-fg: var(--color-forest);
  /* The dialog's backdrop. */
  --scrim: rgba(30, 58, 44, 0.4);

  /* Form fields keep their light look on every surface, so the reverse block
     doesn't redefine these. */
  --field-bg: var(--color-white);
  --field-fg: var(--color-ink);
  --field-placeholder: rgba(43, 47, 44, 0.55);
  --field-border-hover: rgba(30, 58, 44, 0.4);
  --field-focus: var(--color-forest);
  --field-invalid: var(--color-error);
  --field-disabled-bg: var(--color-cream);
  /* A data URI can't read a custom property, so the chevron's forest is baked in. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231E3A2C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --logo-face: var(--color-cream);
  --logo-line: var(--color-forest);
  --logo-lift: var(--color-yellow);

  color-scheme: light;
}

/* Reverse: cream and yellow on forest. Use for hero bands, footers and
   feature panels. Yellow becomes the key action colour (7.4:1 on forest).
   [data-surface='forest'] is the older name for [data-surface='reverse']. */
.fd-reverse,
[data-surface='reverse'],
[data-surface='forest'] {
  --bg: var(--color-forest);
  --surface: color-mix(in srgb, var(--color-cream) 6%, var(--color-forest));
  --surface-edge: inset 0 0 0 1px rgba(244, 241, 232, 0.16);

  --heading: var(--color-cream);
  --text: var(--color-cream);
  --text-strong: var(--color-cream);
  --text-muted: rgba(244, 241, 232, 0.75);

  --border: rgba(244, 241, 232, 0.24);
  --border-subtle: rgba(244, 241, 232, 0.14);
  --border-strong: var(--color-cream);

  --action-bg: var(--color-yellow);
  --action-fg: var(--color-forest);
  --action-bg-hover: color-mix(in srgb, var(--color-yellow) 88%, #fff);

  --accent-bg: var(--color-yellow);
  --accent-fg: var(--color-forest);
  --accent-bg-hover: color-mix(in srgb, var(--color-yellow) 88%, #fff);

  --link: var(--color-cream);
  --link-hover: var(--color-yellow);

  --danger: var(--color-error-reverse);
  --focus: var(--color-yellow);
  --focus-gap: var(--color-forest);

  --choice-accent: var(--color-yellow);

  --logo-face: var(--color-forest);
  --logo-line: var(--color-cream);

  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}