/* RRA Group — Color tokens
   Navy carries authority and structure. Orange is reserved for action and
   emphasis only — never decoration. White and grey do the heavy lifting.
   The navy-to-orange ratio across any page should stay ~90/10. */

:root {
  /* ---- Neutral scale (shade-0 darkest → shade-7 lightest, matching Relume export) ---- */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #d8d8d8;
  --color-neutral-light: #b2b2b2;
  --color-neutral: #7f7f7f;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #191919;
  --color-neutral-darkest: #000000;

  /* ---- Navy (primary brand) ---- */
  --color-navy-lightest: #e6e9ec;
  --color-navy-lighter: #ced3d9;
  --color-navy-light: #54677c;
  --color-navy: #0c2745; /* primary */
  --color-navy-dark: #091f37; /* button hover */
  --color-navy-darker: #040f1b;
  --color-navy-darkest: #030b14;

  /* ---- Orange (action / accent only) ---- */
  --color-orange-lightest: #fff1e5;
  --color-orange-lighter: #ffe4cc;
  --color-orange-light: #ffa24c;
  --color-orange: #ff7b00; /* CTA, accents, route lines */
  --color-orange-dark: #cc6200; /* CTA hover */
  --color-orange-darker: #663100;
  --color-orange-darkest: #4c2400;

  /* ---- Brand-guide extended greys (from RRA style guide) ---- */
  --color-ink: #111a24; /* body text on light */
  --color-grey-700: #445261; /* secondary body */
  --color-grey-500: #6b7785; /* captions, meta, labels */
  --color-grey-300: #c6cdd5;
  --color-grey-100: #f2f4f6; /* section backgrounds, card fills */
  --color-line: #e2e6ea; /* borders, dividers, hairlines */

  /* ---- Semantic status ---- */
  --color-success: #1f8a53;
  --color-warning: #c24a00;

  /* ---- Alpha overlays (frost / scrims) ---- */
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-ink-5: rgba(0, 0, 0, 0.05);
  --color-ink-10: rgba(0, 0, 0, 0.1);
  --color-ink-15: rgba(0, 0, 0, 0.15);
  --color-ink-20: rgba(0, 0, 0, 0.2);
  --color-ink-60: rgba(0, 0, 0, 0.6);

  /* ---- Semantic aliases ---- */
  --text-heading: var(--color-navy);
  --text-body: var(--color-ink);
  --text-muted: var(--color-grey-500);
  --text-on-dark: var(--color-white);
  --text-on-dark-muted: #9fb2c8;

  --surface-page: var(--color-white);
  --surface-subtle: var(--color-grey-100);
  --surface-card: var(--color-white);
  --surface-dark: var(--color-navy);

  --border-default: var(--color-line);
  --border-strong: var(--color-grey-300);

  --accent: var(--color-orange);
  --accent-hover: var(--color-orange-dark);
  --accent-soft: var(--color-orange-lightest);
  --focus-ring: rgba(255, 123, 0, 0.28);
}

/* ---- Section color schemes (from Relume DESIGN.md) ---- */
.scheme-1 {
  --scheme-background: var(--color-neutral-lightest);
  --scheme-foreground: var(--color-white);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-border: var(--color-ink-15);
}
.scheme-2 {
  --scheme-background: var(--color-white);
  --scheme-foreground: var(--color-neutral-lightest);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-border: var(--color-ink-15);
}
.scheme-3 {
  --scheme-background: var(--color-navy-lightest);
  --scheme-foreground: var(--color-navy-lighter);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-border: var(--color-ink-15);
}
.scheme-1,
.scheme-2,
.scheme-3 {
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}