/* Text and surface must change together. Loaded after design configuration.
   No blanket recolouring of SVGs, radar pixels, warning scales or custom cards. */
:root {
    --readable-accent: color-mix(in srgb, var(--ink) 80%, var(--blue-600));
    --support-text: var(--muted);
    --support-accent: var(--readable-accent);
}

/* Older cyclone components used a different set of variable names. Keep the
   aliases local: unrelated widgets and administrator colours are untouched. */
:is([data-hurricane-page], [data-european-storm-page], .hurricane-overview-section, .hurricane-archive-dialog) {
    --heading-color: var(--ink);
    --muted-color: var(--muted);
    --surface-color: var(--surface-solid);
    --border-color: var(--line);
}
.invest-probabilities > div,
.invest-archive-card,
.invest-history-table th,
[data-hurricane-page] .hurricane-source-status article,
[data-hurricane-page] .hurricane-source-note,
[data-european-storm-page] .eu-storm-note,
.eu-storm-card,
.hurricane-insight-grid article,
.hurricane-season-summary article,
.hurricane-archive-list > article,
.hurricane-archive-list dl div,
.hurricane-information-grid article,
.hurricane-archive-detail-summary article,
.hurricane-archive-data-section,
.hurricane-archive-data-section > header,
.hurricane-archive-data-section th,
.hurricane-archive-data-section tbody tr:nth-child(even),
.hurricane-archive-empty {
    color: var(--ink);
    background: var(--surface-solid);
    border-color: var(--line);
}
.invest-probabilities > div,
.hurricane-archive-list dl div,
.hurricane-archive-data-section th { background: var(--surface-soft); }
.invest-area-card :is(.invest-kind, .invest-qualitative, dt),
.invest-detail-note,
[data-hurricane-page] .hurricane-source-note p,
[data-hurricane-page] .hurricane-note-sources small,
.eu-storm-card :is(.eyebrow, dt, .eu-storm-card-excerpt),
[data-european-storm-page] .eu-storm-note,
.hurricane-insight-grid :is(small, span),
.hurricane-season-summary :is(small, span),
.hurricane-archive-list header small,
.hurricane-archive-list dt,
.hurricane-archive-empty p,
.hurricane-information-grid p,
.hurricane-archive-detail-summary small,
.hurricane-archive-data-section > header > span,
.hurricane-archive-data-section td small,
.hurricane-archive-disclaimer { color: var(--muted); }
.invest-probabilities :is(small, strong),
.invest-archive-card > button,
.eu-storm-card :is(h3, dd),
.hurricane-insight-grid strong,
.hurricane-season-summary strong,
.hurricane-archive-list :is(h4, dd),
.hurricane-information-grid h3,
.hurricane-archive-detail-summary strong,
.hurricane-archive-data-section :is(h4, th, td) { color: var(--ink); }
.invest-area-card .eyebrow,
.invest-archive-card .eyebrow,
.hurricane-information-grid article > span,
.hurricane-information-grid a,
.hurricane-source-status a,
[data-hurricane-page] .hurricane-note-sources a { color: var(--readable-accent); }
.invest-area-card dl > div,
.invest-history-table :is(th, td),
.invest-report { border-color: var(--line); }
.invest-open, .eu-storm-open {
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: var(--surface-soft);
    cursor: pointer;
}
.invest-open:hover, .eu-storm-open:hover { background: var(--surface-solid); }
.invest-open:focus-visible { outline: 3px solid var(--readable-accent); outline-offset: 3px; }
.invest-area-card:is(.potential-low, .potential-medium) .invest-risk { color: #000; }
.eu-storm-archive-open { color: var(--muted); }
.hurricane-archive-dialog { color: var(--ink); background: var(--surface-solid); }
.hurricane-data-state { background: #d9f1e5; color: #176d49; }
.hurricane-data-state.is-stale { background: #fff0d9; color: #79430e; }
.hurricane-data-state.is-offline { background: #fce2e3; color: #a1303b; }

/* ENSO: phase information keeps its warm/cold border, not a white text-on-
   pastel combination. Existing coloured legends and probability bars stay. */
.enso-current-grid article,
.enso-basin-grid article,
.enso-europe-grid article,
.enso-table-scroll thead {
    color: var(--ink);
    background: var(--surface-soft);
    border-color: var(--line);
}
.enso-current-grid .enso-phase-warm,
.enso-current-grid .enso-phase-cold { background: var(--surface-soft) !important; }
.enso-basin-grid .eyebrow,
.enso-europe-grid .eyebrow,
.enso-source-note, .enso-note, .enso-card figcaption,
.enso-chart-message { color: var(--muted); }
.enso-card a { color: var(--readable-accent); }

/* Space weather cards: explicit label, value and surrounding surface. The
   fixed-colour forecast cells and scientific images are handled below. */
.space-scale-card,
.space-aurora-copy,
.space-information-grid article,
.space-weather-empty,
.space-weather-section-nav { color: var(--ink); background: var(--surface-solid); border-color: var(--line); }
.space-scale-card :is(header small, p, footer),
.space-aurora-copy :is(p, small),
.space-information-grid p,
.space-weather-empty span { color: var(--muted); }
.space-scale-card > strong { color: var(--ink); }
.space-weather-section-nav a:hover { background: var(--surface-soft); }
.space-aurora-copy a, .space-information-grid a { color: var(--readable-accent); }

/* Surfaces which intentionally remain light (charts, coloured model cells,
   instruments) need their own dark ink, including inherited headings. Do not
   alter data colours, map labels, SVG fills, threshold or risk semantics. */
:is(.hurricane-track-panel, .hurricane-curve-panel, .space-forecast-point,
    .space-weather-sidebar-panel,
    .rain-soil-intro, .rain-soil-facts > span, .rain-soil-readout,
    .rain-soil-plot, .enso-kpis > span, .enso-schematic,
    .soil-history-controls, .soil-history-depths label, .soil-history-summary th,
    .temperature-dat-paths > div, .temperature-dat-cards > div,
    .temperature-dat-progress, .temperature-dat-table tbody tr:nth-child(even),
    .weather-local-chart, .weather-local-stats article,
    .weather-model-information-grid article, .weather-model-availability-table) {
    --ink: #10263a;
    --muted: #405e73;
    --blue-600: #17668e;
    --support-text: #365469;
    --support-accent: #17668e;
    color: var(--ink);
    color-scheme: light;
}
.space-forecast-point { color: #10263a; }
.space-forecast-point :is(small, em, i) { color: #405463; opacity: 1; }
.rain-soil-plot h3 { color: #10263a; }
.rain-soil-plot header small,
.hurricane-track-panel header span,
.hurricane-curve-panel header span,
.hurricane-track-panel > small,
.hurricane-track-panel p,
.hurricane-curve-panel p { color: #405e73; }

/* Headings with an explicitly transparent appearance have no separate light
   panel: use the surrounding palette, including dark-by-default themes. */
html[data-heading-surface="none"] :is(.section-heading, .warning-type-heading, .warning-measurement-heading) h2 { color: var(--ink); }
html[data-heading-surface="none"] :is(.section-heading, .warning-type-heading, .warning-measurement-heading) .eyebrow { color: var(--readable-accent); }
html[data-heading-surface="none"] .section-heading :is(.section-note, .section-link),
html[data-heading-surface="none"] .warning-type-heading > span { color: var(--muted); }

/* Source and tool links on ordinary theme-aware surfaces. Coloured banners,
   custom content cards and map canvases keep their own paired palettes. */
:is(.invest-introduction, .invest-archive, .enso-card, .space-information-grid) a:focus-visible {
    outline: 3px solid var(--readable-accent);
    outline-offset: 3px;
}