/* light.css — the light theme. Loaded after every other stylesheet; everything here applies only
   under <html data-theme="light"> (js/theme.js). Nocturne's dark tokens are the default; this
   file re-points the tokens at a light ground and fixes the few hard-coded dark colours. */

html[data-theme="light"] {
    color-scheme: light;

    --color-bg: #f1f6f6;
    --color-surface: #ffffff;
    --color-text: #10262c;
    --color-accent: #0b756a;
    --color-accent-2: #1a8d81;
    --color-divider: color-mix(in srgb, #10262c 16%, transparent);

    /* The neutral ramp mirrored: step 100 is the darkest ink, 900 the faintest tint. */
    --color-neutral-100: #10262c;
    --color-neutral-200: #26393f;
    --color-neutral-300: #3d5257;
    --color-neutral-400: #4e6469;
    --color-neutral-500: #5e7378;
    --color-neutral-600: #83979c;
    --color-neutral-700: #afc0c3;
    --color-neutral-800: #d0dcde;
    --color-neutral-900: #e4eded;

    --color-accent-100: #103a36;
    --color-accent-200: #185a53;
    --color-accent-300: #1f7f74;
    --color-accent-400: #128377;
    --color-accent-800: #aeece3;
    --color-accent-2-100: #1c3633;
    --color-accent-2-800: #c6e9e4;

    --color-go: #1f8a4c;
    --color-caution: #8a6500;
    --color-no-go: #c23b3f;
    --color-no-go-text: #b3282d;
    --sky-sun: #e6a817;
    --sky-cloud: #c4cadb;
    --sky-cloud-back: #9aa2bb;
    --sky-cloud-storm: #7b829c;
    --sky-rain: #0b7f93;

    --shadow-sm: 0 0 0 1px #d0dcde;
    --shadow-md: 0 0 0 1px #d0dcde, 0 6px 18px rgba(16, 38, 44, 0.12);
    --shadow-lg: 0 0 0 1px #afc0c3, 0 16px 40px rgba(16, 38, 44, 0.18);
}

/* Translucent overlays that were tinted for a dark ground. */
html[data-theme="light"] .app-header { background: color-mix(in srgb, #f1f6f6 92%, transparent); }
html[data-theme="light"] .score-card,
html[data-theme="light"] .week-cell,
html[data-theme="light"] .chart-box { background: rgba(16, 38, 44, 0.03); }
html[data-theme="light"] .skeleton-panel { background: rgba(16, 38, 44, 0.05); }
html[data-theme="light"] .spot-row:hover,
html[data-theme="light"] .week-cell:hover { background: rgba(16, 38, 44, 0.06); }
html[data-theme="light"] .spot-row:active,
html[data-theme="light"] .week-cell:active { background: rgba(16, 38, 44, 0.1); }
html[data-theme="light"] .verdict-chip.is-go { background: #1f8a4c1a; }
html[data-theme="light"] .verdict-chip.is-caution { background: #8a65001a; }
html[data-theme="light"] .verdict-chip.is-no_go { background: #c23b3f1a; }
html[data-theme="light"] .advisory-banner strong,
html[data-theme="light"] .advisory-banner a,
html[data-theme="light"] .bw-badge { color: #b3282d; }
html[data-theme="light"] .hour-bar { background: linear-gradient(180deg, #83979c, #5e7378); }
html[data-theme="light"] .week-bw { color: #8a5a2c; }
html[data-theme="light"] .plan-tool-finish,
html[data-theme="light"] .plan-best { color: #1f7a4d; }
html[data-theme="light"] .plan-tool-finish { border-color: #1f7a4d; }
html[data-theme="light"] .plan-hours tr.is-best td:first-child { box-shadow: inset 2px 0 0 #1f7a4d; }
html[data-theme="light"] .plan-hours tr.is-best td { background: rgba(31, 138, 76, 0.1); }
html[data-theme="light"] .plan-feedback.is-error { color: #b3282d; }
html[data-theme="light"] .app-toast { box-shadow: 0 8px 28px rgba(16, 38, 44, 0.2); }
html[data-theme="light"] .install-card { box-shadow: 0 12px 36px rgba(16, 38, 44, 0.22); }
html[data-theme="light"] .install-fab {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 30%, transparent), 0 2px 6px rgba(16, 38, 44, 0.18);
}
html[data-theme="light"] .install-fab-icon { background: color-mix(in srgb, #ffffff 18%, transparent); }
html[data-theme="light"] .dialog-backdrop { background: rgba(16, 38, 44, 0.4); }

/* Maps: the OSM tiles stay as they are (no darkening) on a pale ground, and the overlays on top
   of them go white. */
html[data-theme="light"] #spots-map,
html[data-theme="light"] #plan-map { background: #dfe6ef; }
html[data-theme="light"] .map-legend,
html[data-theme="light"] .map-methods,
html[data-theme="light"] .map-conditions-pill,
html[data-theme="light"] .flow-legend,
html[data-theme="light"] .plan-map-status,
html[data-theme="light"] .depth-readout,
html[data-theme="light"] .depth-legend { background: rgba(255, 255, 255, 0.9); color: #10262c; }
html[data-theme="light"] .leaflet-control-attribution { background: rgba(255, 255, 255, 0.75) !important; }
html[data-theme="light"] .leaflet-tooltip { border-color: #d0dcde; }
html[data-theme="light"] .depth-ruler { background: linear-gradient(#cfe3f1, #7fa4bf); }
html[data-theme="light"] .plan-point,
html[data-theme="light"] .leaflet-marker-icon.plan-vertex { border-color: #ffffff; }
html[data-theme="light"] .flow-arrow svg { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)); }
html[data-theme="light"] .method-icon { filter: none; }

/* Public/native bars follow the ground. */
@media (max-width: 700px) {
    html[data-theme="light"] .app-header { background: #f1f6f6; }
    html[data-theme="light"] .screen-nav.seg { background: color-mix(in srgb, #f1f6f6 96%, transparent); }
}