/* DAYBREAK PROVISIONS tokens: the single source of truth. Re-skin here first.
   The palette is a day: six sky steps from 05:00 indigo to 19:00 dusk rose.
   Every band pairs its sky with a foreground that holds AA or better. */

@font-face {
  font-family: "Gantari";
  src: url("../fonts/gantari-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gantari";
  src: url("../fonts/gantari-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- sky primitives: the six hours ---- */
  --sky-0500: #232946; /* pre-dawn indigo */
  --sky-0700: #e9c3ae; /* first-light peach */
  --sky-0900: #fae096; /* morning gold */
  --sky-1200: #fff8e7; /* noon cream */
  --sky-1600: #f2be93; /* late-day amber, the 16:00 sun getting low */
  --sky-1900: #5c3244; /* dusk rose */

  /* ---- ink primitives ---- */
  --espresso: #3a2a1c;      /* text on light skies, 8.2:1 or better */
  --flour: #fff3de;         /* text on dark skies, 9.5:1 or better */
  --meal-light: #5e5140;    /* muted on light skies, 5.6:1 or better */
  --meal-dark: #d9c9b8;     /* muted on dark skies, 6.5:1 or better */

  /* ---- butter-crust accent, two AA strengths + the raw crust ---- */
  --butter-bright: #f5a54b; /* on dark skies: 7.0 on indigo, 5.2 on dusk */
  --butter-toast: #9c550f;  /* on light skies: 5.3 on cream, AA at label sizes */
  --crust: #d9832e;         /* raw crust: fills, large marks, never small text on cream */

  /* ---- semantic set (defaults = the noon band; each band rescopes) ---- */
  --sky: var(--sky-1200);
  --fg: var(--espresso);
  --muted: var(--meal-light);
  --line: rgba(58, 42, 28, 0.18);
  --line-strong: rgba(58, 42, 28, 0.55);
  --accent: var(--butter-toast);
  --accent-raw: var(--crust);
  --focus: #1244c9;
  --btn-ink: #241503;       /* text on crust fills, 6.9:1 on #d9832e */

  /* chrome (fixed header + clock) follows its own step, set by [data-chrome]/[data-sky] */
  --chrome-fg: var(--flour);
  --chrome-muted: var(--meal-dark);
  --chrome-accent: var(--butter-bright);
  --chrome-line: rgba(255, 243, 222, 0.25);
  --chrome-focus: #ffdca8;

  /* ---- type ---- */
  --font-display: "Gantari", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --t-display: clamp(2.5rem, 7.5vw, 6.25rem);
  --t-h2: clamp(1.9rem, 4.4vw, 3.4rem);
  --t-h3: clamp(1.25rem, 2.2vw, 1.7rem);
  --t-lead: clamp(1.15rem, 1.7vw, 1.45rem);
  --t-body: 1.125rem;
  --t-small: 0.9375rem;
  --t-time: 0.8125rem;
  --lh-tight: 0.98;
  --lh-heading: 1.05;
  --lh-body: 1.6;
  --track-time: 0.16em;

  /* ---- space ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --band-pad: clamp(5rem, 12vh, 9rem);
  --gutter: clamp(1rem, 2.5vw, 1.5rem);
  --edge: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 40rem;
  --max-w: 74rem;

  /* ---- shape + depth ---- */
  --r-1: 6px;
  --r-2: 14px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(35, 41, 70, 0.08), 0 10px 30px rgba(35, 41, 70, 0.08);

  /* ---- motion ---- */
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 650ms;
  --dur-sky: 900ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);

  /* ---- layers ---- */
  --z-clock: 40;
  --z-ovendoor: 50;
  --z-skip: 60;
}

/* =========================================================
   Band themes. Two delivery modes for the same six steps:

   1) Static bands (no-JS, and reduced motion): each .dayband
      carries its own sky + foreground, scoped by [data-band].
   2) Sky-live (html.sky-live, set by JS when motion is allowed):
      bands go transparent and the root semantic set steps with
      [data-sky], so the whole viewport is one sky at a time and
      cross-fades as you scroll into the next hour.
   ========================================================= */

/* -- the six semantic sets, written once as utility rulesets -- */
html:not(.sky-live) [data-band="b1"],
html.sky-live[data-sky="b1"] {
  --sky: var(--sky-0500);
  --fg: var(--flour);
  --muted: var(--meal-dark);
  --line: rgba(255, 243, 222, 0.22);
  --line-strong: rgba(255, 243, 222, 0.6);
  --accent: var(--butter-bright);
  --focus: #ffdca8;
}
html:not(.sky-live) [data-band="b2"],
html.sky-live[data-sky="b2"] {
  --sky: var(--sky-0700);
  --fg: var(--espresso);
  --muted: #59422f;
  --line: rgba(58, 42, 28, 0.22);
  --line-strong: rgba(58, 42, 28, 0.55);
  --accent: #7a3f09;
  --focus: #1244c9;
}
html:not(.sky-live) [data-band="b3"],
html.sky-live[data-sky="b3"] {
  --sky: var(--sky-0900);
  --fg: var(--espresso);
  --muted: var(--meal-light);
  --line: rgba(58, 42, 28, 0.2);
  --line-strong: rgba(58, 42, 28, 0.55);
  --accent: #94500d;
  --focus: #1244c9;
}
html:not(.sky-live) [data-band="b4"],
html.sky-live[data-sky="b4"] {
  --sky: var(--sky-1200);
  --fg: var(--espresso);
  --muted: var(--meal-light);
  --line: rgba(58, 42, 28, 0.18);
  --line-strong: rgba(58, 42, 28, 0.55);
  --accent: var(--butter-toast);
  --focus: #1244c9;
}
html:not(.sky-live) [data-band="b5"],
html.sky-live[data-sky="b5"] {
  --sky: var(--sky-1600);
  --fg: var(--espresso);
  --muted: #57452c;
  --line: rgba(58, 42, 28, 0.22);
  --line-strong: rgba(58, 42, 28, 0.55);
  --accent: #7a3f09;
  --focus: #1244c9;
}
html:not(.sky-live) [data-band="b6"],
html.sky-live[data-sky="b6"] {
  --sky: var(--sky-1900);
  --fg: var(--flour);
  --muted: var(--meal-dark);
  --line: rgba(255, 243, 222, 0.22);
  --line-strong: rgba(255, 243, 222, 0.6);
  --accent: var(--butter-bright);
  --focus: #ffdca8;
}

/* -- chrome step: the fixed header + clock read the band under them.
      Static mode follows [data-chrome] (top-of-viewport observer);
      sky-live follows [data-sky] (the body IS one sky). -- */
html:not(.sky-live)[data-chrome="b1"], html.sky-live[data-sky="b1"],
html:not(.sky-live)[data-chrome="b6"], html.sky-live[data-sky="b6"],
html:not(.js) {
  --chrome-fg: var(--flour);
  --chrome-muted: var(--meal-dark);
  --chrome-accent: var(--butter-bright);
  --chrome-line: rgba(255, 243, 222, 0.25);
  --chrome-focus: #ffdca8;
}
html:not(.sky-live)[data-chrome="b2"], html.sky-live[data-sky="b2"],
html:not(.sky-live)[data-chrome="b3"], html.sky-live[data-sky="b3"],
html:not(.sky-live)[data-chrome="b4"], html.sky-live[data-sky="b4"],
html:not(.sky-live)[data-chrome="b5"], html.sky-live[data-sky="b5"] {
  --chrome-fg: var(--espresso);
  --chrome-muted: #59422f;
  --chrome-accent: #7a3f09;
  --chrome-line: rgba(58, 42, 28, 0.25);
  --chrome-focus: #1244c9;
}