/* EduWonderLab dimensional design system.
 *
 * One physical idea carried everywhere: math as lit, tactile objects on a
 * drafting desk. Light comes from the upper left. Surfaces are ceramic (a lit
 * top edge, a thickness lip below), controls are keycaps that press down, and
 * every illustration is an isometric solid whose three faces take their tones
 * from the rules below (drawn by tools/lib/iso.mjs).
 *
 * This file owns tokens, materials and the iso tone model. Page compositions
 * (the homepage stage, the lesson header, the practice shell) live in their own
 * sheets and only consume what is defined here. Brand colours are the locked
 * palette in engine/design/tokens.json; nothing here is violet. */
:root {
  --dm-night: #0d273d;
  --dm-shade: #1a1612;
  --dm-navy: #17324d;
  --dm-navy-2: #1f4468;
  --dm-paper: #f7f4ec;
  --dm-paper-2: #efe9db;
  --dm-card: #ffffff;
  --dm-teal: #1fa6a2;
  --dm-teal-ink: #0c6f6b;
  --dm-brass: #f2c15b;
  --dm-brass-ink: #8a5a00;
  --dm-text: #24323f;
  --dm-muted: #4a555e;
  --dm-line: rgb(23 50 77 / 0.14);

  /* Elevation. Shadows are tinted with the ink colour and stacked as a contact
     shadow plus an ambient one; the inset white edge is the lit top. */
  --dm-lit: inset 0 1px 0 rgb(255 255 255 / 0.95);
  --dm-lip: inset 0 -2px 0 rgb(23 50 77 / 0.07);
  --dm-e1:
    var(--dm-lit), var(--dm-lip), 0 1px 2px rgb(13 39 61 / 0.1),
    0 4px 10px -4px rgb(13 39 61 / 0.14);
  --dm-e2:
    var(--dm-lit), var(--dm-lip), 0 2px 4px rgb(13 39 61 / 0.08),
    0 14px 26px -10px rgb(13 39 61 / 0.26);
  --dm-e3:
    var(--dm-lit), var(--dm-lip), 0 4px 8px rgb(13 39 61 / 0.08),
    0 30px 50px -18px rgb(13 39 61 / 0.4);

  --dm-radius: 16px;
  --dm-radius-sm: 10px;
  --dm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dm-font-display: "Fraunces", Georgia, serif;
  --dm-font-body: "Hanken Grotesk", system-ui, sans-serif;

  /* Isometric tones. a is the unit colour (pages override --tone-a-base). */
  --tone-a-base: #1f6f8b;
  --tone-b-base: #d9a73a;
  --tone-c-base: #17324d;
  --tone-d-base: #efe9da;
  --tone-e-base: #1f8f8b;
}

/* Per-unit identity. Same hues the unit pages already use. */
:root {
  --unit-1: #316f62;
  --unit-2: #2f6fa3;
  --unit-3: #b5562b;
  --unit-4: #b3402a;
  --unit-5: #2f8a8a;
  --unit-6: #a8792a;
  --unit-7: #3f6db5;
  --unit-8: #a34a6b;
  --unit-9: #557a2f;
  --unit-10: #5b6470;
}

/* ---- The lighting model: every solid has a lit top, a body face, a shaded face ---- */
.iso {
  display: block;
  overflow: visible;
}
.iso .s {
  --base: var(--tone-a-base);
}
.iso .s.b {
  --base: var(--tone-b-base);
}
.iso .s.c {
  --base: var(--tone-c-base);
}
.iso .s.d {
  --base: var(--tone-d-base);
}
.iso .s.e {
  --base: var(--tone-e-base);
}
.iso .s .t {
  fill: color-mix(in srgb, var(--base) 56%, #fff);
  stroke: rgb(255 255 255 / 0.6);
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.iso .s .l {
  fill: var(--base);
  stroke: rgb(13 39 61 / 0.16);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.iso .s .r {
  fill: color-mix(in srgb, var(--base) 70%, var(--dm-shade));
  stroke: rgb(13 39 61 / 0.2);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.iso .s.flat {
  fill: var(--base);
  stroke: rgb(13 39 61 / 0.2);
  stroke-width: 0.4;
}
.iso circle.t {
  stroke: none;
  fill: rgb(255 255 255 / 0.55);
}
.iso circle.l,
.iso circle.r {
  stroke: none;
}
.iso .shade {
  fill: var(--dm-night);
  fill-opacity: var(--o, 0.08);
}
.iso .grid polyline {
  fill: none;
  stroke: rgb(23 50 77 / 0.2);
  stroke-width: 0.45;
}
.iso .lab {
  fill: rgb(13 39 61 / 0.82);
  font-family: var(--dm-font-display);
  font-weight: 700;
}

/* ---- Desk: the page under everything ----
   !important is deliberate and limited to the two desk layers: curriculum-hub.css,
   curriculum-enhancements.css (`body { background: #fff !important }`) and the
   unit-page sheets each paint the body, and the desk must win on every shell page. */
body.curriculum-product {
  background-color: var(--dm-paper-2) !important;
  background-image:
    radial-gradient(1100px 520px at 8% -6%, rgb(31 166 162 / 0.11), transparent 62%),
    radial-gradient(900px 460px at 100% 2%, rgb(242 193 91 / 0.16), transparent 58%),
    linear-gradient(var(--dm-paper), var(--dm-paper-2)) !important;
  background-attachment: fixed;
  color: var(--dm-text);
}
body.curriculum-product::before { background: transparent !important; }
body.curriculum-product:is(.high-contrast, .hub-high-contrast) { background: #fff !important; }

/* ---- Navigation: a lit navy bar that sits above the page ---- */
body.curriculum-product .ewl-course-nav {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--dm-navy-2), var(--dm-navy) 70%);
  border-bottom: 1px solid rgb(0 0 0 / 0.3);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 6px 18px -8px rgb(13 39 61 / 0.55);
  color: #f7f4ec;
}
body.curriculum-product .ewl-course-brand,
body.curriculum-product .ewl-course-nav li a,
body.curriculum-product .ewl-course-more > summary {
  color: #f7f4ec;
}
body.curriculum-product .ewl-course-brand span {
  color: #c9d7e3;
}
body.curriculum-product .ewl-course-nav li a {
  border-radius: 10px;
  transition:
    background 0.18s var(--dm-ease),
    color 0.18s var(--dm-ease);
}
body.curriculum-product .ewl-course-nav li a:hover,
body.curriculum-product .ewl-course-more > summary:hover,
body.curriculum-product .ewl-course-more[open] > summary {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
}
body.curriculum-product .ewl-course-nav li a[aria-current="page"] {
  background: linear-gradient(180deg, #fffdf7, #f3eee1);
  color: var(--dm-night);
  text-decoration: none;
  box-shadow:
    var(--dm-lit),
    0 2px 0 rgb(0 0 0 / 0.28);
}
body.curriculum-product .ewl-course-more--current > summary {
  color: #fff;
}
body.curriculum-product .ewl-course-nav .ewl-course-more > ul {
  background: var(--dm-card);
  border-radius: 14px;
  box-shadow: var(--dm-e3);
}
body.curriculum-product .ewl-course-nav .ewl-course-more li a {
  color: var(--dm-text);
}
body.curriculum-product .ewl-course-nav .ewl-course-more li a:hover {
  background: #eaf2fa;
  color: var(--dm-night);
}
body.curriculum-product .ewl-course-nav .ewl-course-more li a[aria-current="page"] {
  background: #e3edf6;
  box-shadow: none;
}
body.curriculum-product :is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--dm-brass);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(13 39 61 / 0.55);
}
body.curriculum-product main :is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline-color: var(--course-blue, #175da0);
  box-shadow: 0 0 0 5px rgb(255 255 255 / 0.9);
}

/* ---- Ceramic surfaces ---- */
body.curriculum-product :is(.card, .featured, .sheet, .unit-card-header) {
  background: linear-gradient(180deg, #ffffff, #fbf8f1);
  background-image: linear-gradient(180deg, #ffffff, #fbf8f1);
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  box-shadow: var(--dm-e1);
}
body.curriculum-product a.card,
body.curriculum-product .card:is(a, button, [role="link"]) {
  transition:
    transform 0.22s var(--dm-ease),
    box-shadow 0.22s var(--dm-ease);
}
body.curriculum-product :is(a.card, .card:is(a, button, [role="link"])):is(:hover, :focus-visible) {
  transform: translateY(-4px);
  box-shadow: var(--dm-e3);
}
body.curriculum-product :is(a.card, .card:is(a, button, [role="link"])):active {
  transform: translateY(-1px);
  box-shadow: var(--dm-e2);
}

/* ---- Keycaps: controls with thickness that press down ---- */
body.curriculum-product :is(.btn, .unit-resource-btn, .sheet-actions a) {
  background: linear-gradient(180deg, #ffffff, #f1ece0);
  border: 1px solid rgb(23 50 77 / 0.22);
  border-radius: 12px;
  color: var(--course-blue, #175da0);
  box-shadow:
    var(--dm-lit),
    0 3px 0 rgb(23 50 77 / 0.18),
    0 8px 14px -8px rgb(13 39 61 / 0.35);
  transition:
    transform 0.12s var(--dm-ease),
    box-shadow 0.12s var(--dm-ease);
}
body.curriculum-product :is(.btn, .unit-resource-btn, .sheet-actions a):hover {
  transform: translateY(-1px);
  box-shadow:
    var(--dm-lit),
    0 4px 0 rgb(23 50 77 / 0.2),
    0 12px 18px -8px rgb(13 39 61 / 0.4);
}
body.curriculum-product :is(.btn, .unit-resource-btn, .sheet-actions a):active {
  transform: translateY(2px);
  box-shadow:
    var(--dm-lit),
    0 1px 0 rgb(23 50 77 / 0.2),
    0 3px 6px -4px rgb(13 39 61 / 0.3);
}
body.curriculum-product .btn-solid {
  background: linear-gradient(180deg, #17897f, var(--dm-teal-ink));
  border-color: #07514d;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    0 3px 0 #07514d,
    0 10px 16px -8px rgb(7 81 77 / 0.7);
}
body.curriculum-product .btn-solid:hover {
  background: linear-gradient(180deg, #1b9a8f, #0f7e78);
  color: #fff;
}
body.curriculum-product .btn-solid:active {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    0 1px 0 #07514d;
}

/* Headline voice shared by every shell page. */
body.curriculum-product :is(h1, h2) {
  font-family: var(--dm-font-display);
  color: var(--dm-night);
  letter-spacing: -0.012em;
}

/* ---- Constraints: motion, contrast and print ---- */
@media (prefers-reduced-motion: reduce) {
  body.curriculum-product * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  body.curriculum-product :is(a.card, .btn, .unit-resource-btn):is(:hover, :active) {
    transform: none;
  }
}
@media (prefers-contrast: more), (forced-colors: active) {
  body.curriculum-product :is(.card, .featured, .sheet, .btn, .unit-resource-btn, .ewl-course-nav) {
    box-shadow: none;
    border: 2px solid currentColor;
  }
}
body.curriculum-product:is(.high-contrast, .hub-high-contrast)
  :is(.card, .featured, .sheet, .btn, .unit-resource-btn) {
  box-shadow: none;
  border: 2px solid currentColor;
  background: #fff;
}
@media print {
  body.curriculum-product {
    background: #fff;
  }
  body.curriculum-product :is(.card, .featured, .sheet, .btn) {
    box-shadow: none;
  }
}