/* The colours of the day. skyTheme.js sets html[data-sky-phase] from the
   scenery's clock: dawn, morning, midday, afternoon, golden, dusk, night.
   Day phases stay on the light theme with gentle warm-neutral tints of the
   soft paper in pages.css - never a glaring white (cards at most #f9f8f3,
   the page between #e2d7d0 and #efe9de) and never pink. Night keeps
   pages.css's calm slate, so nothing here applies to the dark theme. Only
   colour tokens change.

   Contrast (WCAG 2.x, checked against the darkest surface each is used on):
   ink #22272a on card/page >= 10.7:1 in every phase; soft text >= 4.6:1 on
   the page colour (so also on cards and fields); the late/soon chips >= 4.6:1
   on the page colour; white on the forest-green button stays 7.8:1. */

/* Typed, so the page can fade between phases (about 2 s). Browsers without
   @property simply switch. */
@property --c-ivory { syntax: "<color>"; inherits: true; initial-value: #efebe1; }
@property --c-card { syntax: "<color>"; inherits: true; initial-value: #faf8f2; }
@property --c-line { syntax: "<color>"; inherits: true; initial-value: #e0dbcf; }
@property --c-line-strong { syntax: "<color>"; inherits: true; initial-value: #d3cec1; }
@property --c-field { syntax: "<color>"; inherits: true; initial-value: #f2f0e8; }
@property --c-soft { syntax: "<color>"; inherits: true; initial-value: #6b706a; }
@property --c-late { syntax: "<color>"; inherits: true; initial-value: #b0533b; }
@property --c-soon { syntax: "<color>"; inherits: true; initial-value: #9b6b22; }
@property --surface-panel { syntax: "<color>"; inherits: true; initial-value: #faf8f3; }
@property --bubble { syntax: "<color>"; inherits: true; initial-value: #f0eee6; }
@property --border-subtle { syntax: "<color>"; inherits: true; initial-value: #eeebe2; }

/* skyTheme.js adds .sky-fade once the first colours are on screen, and
   drops it for a moment whenever light and dark swap (a cross-fade between
   them would pass through unreadable grey). */
html.has-pages.sky-fade {
    transition:
        --c-ivory 2s ease, --c-card 2s ease, --c-line 2s ease, --c-line-strong 2s ease,
        --c-field 2s ease, --c-soft 2s ease, --c-late 2s ease, --c-soon 2s ease,
        --surface-panel 2s ease, --bubble 2s ease, --border-subtle 2s ease;
}

html.has-pages.sky-still { transition: none; }

@media (prefers-reduced-motion: reduce) {
    html.has-pages.sky-fade { transition: none; }
}

/* Dawn: a soft early light, a little dim. */
html.has-pages[data-theme="light"][data-sky-phase="dawn"] {
    --c-ivory: #e8dfd8;
    --c-card: #f4ede7;
    --c-line: #d9cdc4;
    --c-line-strong: #cbbdb2;
    --c-field: #eee6df;
    --c-soft: #5f635e;
    --c-late: #9c4934;
    --c-soon: #835a1c;
    --surface-panel: #f2ebe4;
    --bubble: #e9e0d9;
    --border-subtle: #e4dad2;
    --board: #f4eee8;
}

/* Morning: slightly warm paper. */
html.has-pages[data-theme="light"][data-sky-phase="morning"] {
    --c-ivory: #efe9de;
    --c-card: #f9f5ec;
    --c-line: #e0d8c9;
    --c-line-strong: #d2c9b8;
    --c-field: #f3eee4;
    --c-soft: #646963;
    --c-late: #a54e37;
    --c-soon: #895f1e;
    --surface-panel: #f8f4eb;
    --bubble: #efe9de;
    --border-subtle: #ebe5d9;
    --board: #f9f6ee;
}

/* Midday: neutral paper. */
html.has-pages[data-theme="light"][data-sky-phase="midday"] {
    --c-ivory: #eeebe4;
    --c-card: #f8f7f2;
    --c-line: #dfdcd3;
    --c-line-strong: #d1cdc3;
    --c-field: #f2f0ea;
    --c-soft: #656a64;
    --c-late: #a74e38;
    --c-soon: #8b601e;
    --surface-panel: #f7f6f1;
    --bubble: #eeece5;
    --border-subtle: #eae7df;
    --board: #f9f8f3;
}

/* Afternoon: a little golden. */
html.has-pages[data-theme="light"][data-sky-phase="afternoon"] {
    --c-ivory: #eee7d8;
    --c-card: #f9f4e8;
    --c-line: #dfd5c2;
    --c-line-strong: #d1c6b1;
    --c-field: #f3ede0;
    --c-soft: #636862;
    --c-late: #a34d36;
    --c-soon: #885e1d;
    --surface-panel: #f8f2e6;
    --bubble: #eee6d6;
    --border-subtle: #eae2d2;
    --board: #f9f4ea;
}

/* Golden hour: warmer and a touch dimmer. */
html.has-pages[data-theme="light"][data-sky-phase="golden"] {
    --c-ivory: #e9dfca;
    --c-card: #f5ecdb;
    --c-line: #dacdb3;
    --c-line-strong: #cbbd9f;
    --c-field: #efe5d2;
    --c-soft: #5f635e;
    --c-late: #9c4934;
    --c-soon: #835a1c;
    --surface-panel: #f3e9d7;
    --bubble: #e9dfcb;
    --border-subtle: #e4d8c2;
    --board: #f5eddf;
}

/* Dusk: the dimmest of the light phases, a soft evening paper. */
html.has-pages[data-theme="light"][data-sky-phase="dusk"] {
    --c-ivory: #e2d9d0;
    --c-card: #efe8df;
    --c-line: #d3c8bc;
    --c-line-strong: #c4b7a9;
    --c-field: #e9e1d7;
    --c-soft: #5a5f5a;
    --c-late: #954632;
    --c-soon: #7d561b;
    --surface-panel: #ede5dc;
    --bubble: #e4dbd1;
    --border-subtle: #ddd3c8;
    --board: #f0e9e1;
}