/* =============================================================================
   brand.css — THE single place to change the look of the app.

   1. Brand palette   : raw colours + fonts, per colour mode. Edit these.
   2. Primer mapping  : feeds the palette into Primer's own variables, so buttons,
                        links, focus rings, header and tabs follow the brand.
   3. App tokens      : semantic --app-* tokens used by app.css, charts.js and
                        heatmap.js. Never use raw colours outside this file.

   Loaded right after primer.css (see templates/fragments/layout.html).
   Selectors use html[...] so they out-rank Primer's own theme selectors.
   ============================================================================= */

/* ---------- 1. Brand palette: LIGHT ---------- */
html[data-color-mode] {
  --brand-name-font: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --brand-body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --brand-mono-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --brand-radius: 6px;
}

html[data-color-mode=light],
html[data-color-mode=auto] {
  --brand-primary: #0969da;          /* main action / accent */
  --brand-primary-hover: #0757b8;
  --brand-primary-active: #064a9c;
  --brand-primary-fg: #ffffff;       /* text on primary */
  --brand-primary-muted: #ddf4ff;    /* subtle accent backgrounds, bars */
  --brand-header-bg: #24292f;
  --brand-header-fg: #ffffffb3;
  --brand-header-logo: #ffffff;

  /* data visualisation: series 1..6 (colour-blind friendly order) */
  --brand-series-1: #0969da;
  --brand-series-2: #1a7f37;
  --brand-series-3: #bf8700;
  --brand-series-4: #8250df;
  --brand-series-5: #cf222e;
  --brand-series-6: #1b7c83;
  /* heatmap gradient: cold → hot */
  --brand-heat-0: rgba(9, 105, 218, 0);
  --brand-heat-1: rgba(9, 105, 218, .55);
  --brand-heat-2: rgba(26, 127, 55, .7);
  --brand-heat-3: rgba(191, 135, 0, .8);
  --brand-heat-4: rgba(207, 34, 46, .9);
}

/* ---------- 1. Brand palette: DARK ---------- */
html[data-color-mode=dark] {
  --brand-primary: #2f81f7;
  --brand-primary-hover: #4c94f8;
  --brand-primary-active: #1f6feb;
  --brand-primary-fg: #ffffff;
  --brand-primary-muted: #1f6feb26;
  --brand-header-bg: #161b22;
  --brand-header-fg: #e6edf3b3;
  --brand-header-logo: #e6edf3;

  --brand-series-1: #4493f8;
  --brand-series-2: #3fb950;
  --brand-series-3: #d29922;
  --brand-series-4: #ab7df8;
  --brand-series-5: #f85149;
  --brand-series-6: #39c5cf;
  --brand-heat-0: rgba(68, 147, 248, 0);
  --brand-heat-1: rgba(68, 147, 248, .55);
  --brand-heat-2: rgba(63, 185, 80, .7);
  --brand-heat-3: rgba(210, 153, 34, .8);
  --brand-heat-4: rgba(248, 81, 73, .9);
}

@media (prefers-color-scheme: dark) {
  html[data-color-mode=auto] {
    --brand-primary: #2f81f7;
    --brand-primary-hover: #4c94f8;
    --brand-primary-active: #1f6feb;
    --brand-primary-fg: #ffffff;
    --brand-primary-muted: #1f6feb26;
    --brand-header-bg: #161b22;
    --brand-header-fg: #e6edf3b3;
    --brand-header-logo: #e6edf3;

    --brand-series-1: #4493f8;
    --brand-series-2: #3fb950;
    --brand-series-3: #d29922;
    --brand-series-4: #ab7df8;
    --brand-series-5: #f85149;
    --brand-series-6: #39c5cf;
    --brand-heat-0: rgba(68, 147, 248, 0);
    --brand-heat-1: rgba(68, 147, 248, .55);
    --brand-heat-2: rgba(63, 185, 80, .7);
    --brand-heat-3: rgba(210, 153, 34, .8);
    --brand-heat-4: rgba(248, 81, 73, .9);
  }
}

/* ---------- 2. Primer mapping (don't put raw colours here) ---------- */
html[data-color-mode][data-light-theme][data-dark-theme] {
  --fgColor-accent: var(--brand-primary);
  --fgColor-link: var(--brand-primary);
  --bgColor-accent-emphasis: var(--brand-primary);
  --bgColor-accent-muted: var(--brand-primary-muted);
  --borderColor-accent-emphasis: var(--brand-primary);
  --focus-outlineColor: var(--brand-primary);
  --underlineNav-borderColor-active: var(--brand-primary);
  --button-primary-bgColor-rest: var(--brand-primary);
  --button-primary-bgColor-hover: var(--brand-primary-hover);
  --button-primary-bgColor-active: var(--brand-primary-active);
  --button-primary-borderColor-rest: transparent;
  --button-primary-fgColor-rest: var(--brand-primary-fg);
  --header-bgColor: var(--brand-header-bg);
  --header-fgColor-default: var(--brand-header-fg);
  --header-fgColor-logo: var(--brand-header-logo);
  --fontStack-system: var(--brand-body-font);
  --fontStack-monospace: var(--brand-mono-font);

  /* ---------- 3. App tokens ---------- */
  --app-accent: var(--brand-primary);
  --app-accent-muted: var(--brand-primary-muted);
  --app-radius: var(--brand-radius);
  --app-font-display: var(--brand-name-font);
  --app-chart-1: var(--brand-series-1);
  --app-chart-2: var(--brand-series-2);
  --app-chart-3: var(--brand-series-3);
  --app-chart-4: var(--brand-series-4);
  --app-chart-5: var(--brand-series-5);
  --app-chart-6: var(--brand-series-6);
  --app-chart-grid: var(--borderColor-muted);
  --app-chart-text: var(--fgColor-muted);
  --app-heat-0: var(--brand-heat-0);
  --app-heat-1: var(--brand-heat-1);
  --app-heat-2: var(--brand-heat-2);
  --app-heat-3: var(--brand-heat-3);
  --app-heat-4: var(--brand-heat-4);
  --app-good: var(--fgColor-success);
  --app-warn: var(--fgColor-attention);
  --app-bad: var(--fgColor-danger);
}

body { font-family: var(--brand-body-font); }