/*
 * Green Fleet Mobility brand tokens: the one source every GFM app copies.
 *
 * Values come from the Control Centre theme (services/gfm-control-centre/src/theme/_gfm-brand.scss
 * and _gfm-pages.scss). The Control Centre names its role colours --credixa-*; they appear here as
 * --gfm-* so apps without that theme can use them. Do not invent colours in an app: add the value
 * here first, then copy this file.
 *
 * Dark mode: put class="dark-theme" or data-theme="dark" on <html> or <body>. Every token that
 * changes is redeclared in the dark block, because a var() resolved on :root is not re-resolved
 * when a descendant overrides the token it points at.
 *
 * Fonts: load Inter (400, 500, 600, 700) and Source Serif 4 (600, 700) from Google Fonts.
 */

:root {
  /* Brand, from the logo: green and gold on a cream canvas. */
  --gfm-app-bar: #234a3a;
  --gfm-canvas: #f4f1e8;
  --gfm-card-border: #e8e3d4;
  --gfm-green: #1f4d3a;
  --gfm-green-button: #4f8a64;
  --gfm-gold: #c9a24a;
  --gfm-alert: #b2483a;
  --gfm-radius: 8px;

  /* Text and tags reach WCAG AA (4.5:1) on white cards, the canvas and the soft band. */
  --gfm-ink: #1d2b24;
  --gfm-muted: #5b6760;
  --gfm-label: #59655e;
  --gfm-soft: #f6f3ea;
  --gfm-track: #ebe7da;
  --gfm-ok: #2f7a4f;
  --gfm-gold-dark: #7d5f16;
  --gfm-tag-good-bg: #dcefe3;
  --gfm-tag-good: #25663f;
  --gfm-tag-warn-bg: #f7ebc9;
  --gfm-tag-warn: #755a10;
  --gfm-tag-bad-bg: #f6dad5;
  --gfm-tag-bad: #a33c2e;
  --gfm-tag-mute-bg: #efece0;
  --gfm-tag-mute: #59655e;

  /* Fonts: serif for headings, Inter for everything else. */
  --gfm-font-body: 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
  --gfm-font-display: 'Source Serif 4', Georgia, serif;

  /* Roles (the Control Centre's --credixa-* values). */
  --gfm-page: #f4f1e8;
  --gfm-canvas-deep: #ebe6d6;
  --gfm-surface: #fff;
  --gfm-surface-raised: #fff;
  --gfm-border-strong: #d8d1bc;
  --gfm-row-tint: #faf8f2;
  --gfm-shadow: 0 1px 2px rgb(35 74 58 / 8%);
  --gfm-toolbar: #234a3a;
  --gfm-toolbar-border: #1a382c;
  --gfm-on-toolbar: #fff;
  --gfm-primary: #1f4d3a;
  --gfm-primary-strong: #173a2c;
  --gfm-on-primary: #fff;
  --gfm-accent: #c9a24a;
  --gfm-text-accent: #1f4d3a;
  --gfm-active-indicator: #c9a24a;
  --gfm-active-bg: rgb(201 162 74 / 14%);
  /* 60% green keeps a field's edge at 3:1 against white (WCAG 1.4.11). */
  --gfm-field-outline: rgb(31 77 58 / 60%);
  --gfm-field-outline-hover: #4f8a64;
  --gfm-focus: #4f8a64;

  /* Hero band (login, splash): deep green under a soft gold light. */
  --gfm-hero:
    radial-gradient(circle at 72% 20%, rgb(201 162 74 / 18%) 0%, transparent 42%),
    linear-gradient(150deg, #173a2c 0%, #1f4d3a 55%, #234a3a 100%);
  --gfm-hero-card: rgb(15 34 26 / 55%);
  --gfm-hero-edge: #c9a24a;
  --gfm-hero-highlight: #d9b763;
  --gfm-hero-card-shadow: 0 24px 60px rgb(8 20 15 / 35%);
  --gfm-on-hero: #fff;

  /* Set here, not taken from the Control Centre: chart gridlines (brand green at low alpha). */
  --gfm-chart-grid: rgb(31 77 58 / 10%);
}

.dark-theme,
[data-theme='dark'] {
  --gfm-canvas: #14211b;
  --gfm-card-border: #2c4136;

  --gfm-ink: #e4ece6;
  --gfm-muted: #a3b2a8;
  --gfm-label: #b4c2b9;
  --gfm-soft: #1d2e25;
  --gfm-track: #2c4136;
  --gfm-ok: #7fb894;
  --gfm-gold-dark: #d9b763;
  --gfm-tag-good-bg: #1f3d2c;
  --gfm-tag-good: #a3d0b2;
  --gfm-tag-warn-bg: #3d3318;
  --gfm-tag-warn: #e5c877;
  --gfm-tag-bad-bg: #432421;
  --gfm-tag-bad: #f0a093;
  --gfm-tag-mute-bg: #26362d;
  --gfm-tag-mute: #b4c2b9;

  --gfm-page: #101a15;
  --gfm-canvas-deep: #14211b;
  --gfm-surface: #18271f;
  --gfm-surface-raised: #1d2e25;
  --gfm-border-strong: #3a5446;
  --gfm-toolbar: #0f1f18;
  --gfm-primary: #7fb894;
  --gfm-primary-strong: #a3d0b2;
  --gfm-on-primary: #0f1f18;
  --gfm-accent: #d9b763;
  --gfm-text-accent: #a3d0b2;
  --gfm-active-indicator: #d9b763;
  --gfm-field-outline: rgb(127 184 148 / 55%);
  --gfm-field-outline-hover: #7fb894;
  --gfm-focus: #a3d0b2;

  /* Set here, not taken from the Control Centre: its dark theme still uses Credixa's cyan for these. */
  --gfm-row-tint: rgb(127 184 148 / 7%);
  --gfm-shadow: 0 1px 2px rgb(0 0 0 / 35%);
  --gfm-toolbar-border: #2c4136;
  --gfm-on-toolbar: #fff;
  --gfm-active-bg: rgb(217 183 99 / 14%);
  --gfm-chart-grid: rgb(163 208 178 / 12%);
}