@cogenta/theme-canonical 0.1.2 → 0.2.0

package/src/styles/theme.css

@@ -1,606 +1,25 @@
 /*
- * The canonical theme's stylesheet.
+ * The canonical theme's stylesheet — the entry point, and nothing else.
  *
- * Not one colour, font, radius, duration or shadow is written literally here:
- * every value comes from a `--cogenta-<group>-<name>` custom property produced
- * from the skin's tokens. That is what makes changing skin a rewrite of one
- * generated file with no build (L3, "Skins et changement à chaud"). A single
- * hard-coded hex in this file would be a colour no skin can change.
+ * Three layers, in the only order that works:
  *
- * The derived `--cg-*` properties below are *composed* from tokens — a spacing
- * step is a multiple of `space.unit`, a type step is a power of `font.scale` —
- * so they follow the skin instead of freezing a second scale beside it.
+ *   tokens.css  the design system, derived entirely from the skin's
+ *               `--cogenta-*` custom properties (contract D)
+ *   base.css    document, accessibility floor, page frame, actions
+ *   blocks.css  the twelve vocabulary blocks
+ *
+ * Not one colour, font, radius, duration or shadow is written literally in any
+ * of the three: every value comes from a `--cogenta-<group>-<name>` property
+ * produced from the skin's tokens, or from a `--cg-*` property composed from
+ * those. That is what makes changing skin a rewrite of one generated file with
+ * no build (L3, "Skins et changement à chaud"). A single hard-coded hex would
+ * be a colour no skin can change.
+ *
+ * `@import` is resolved at build time by Astro, and by `@cogenta/cli`'s own
+ * inliner when `cogenta serve` renders without a build. Both flatten these
+ * three into one sheet, so no visitor ever pays for three round trips.
  */
 
-:where(:root) {
-  --cg-density: 1;
-
-  --cg-s1: calc(var(--cogenta-space-unit) * 1 * var(--cg-density));
-  --cg-s2: calc(var(--cogenta-space-unit) * 2 * var(--cg-density));
-  --cg-s3: calc(var(--cogenta-space-unit) * 3 * var(--cg-density));
-  --cg-s4: calc(var(--cogenta-space-unit) * 4 * var(--cg-density));
-  --cg-s6: calc(var(--cogenta-space-unit) * 6 * var(--cg-density));
-  --cg-s8: calc(var(--cogenta-space-unit) * 8 * var(--cg-density));
-  --cg-s12: calc(var(--cogenta-space-unit) * 12 * var(--cg-density));
-  --cg-s16: calc(var(--cogenta-space-unit) * 16 * var(--cg-density));
-
-  /* A monotone increasing scale, by construction: each step multiplies the one
-     below it by `font.scale`, which the skin validator already checks is > 1. */
-  --cg-text-sm: calc(var(--cogenta-font-baseSize) / var(--cogenta-font-scale));
-  --cg-text-base: var(--cogenta-font-baseSize);
-  --cg-text-md: calc(var(--cogenta-font-baseSize) * var(--cogenta-font-scale));
-  --cg-text-lg: calc(var(--cg-text-md) * var(--cogenta-font-scale));
-  --cg-text-xl: calc(var(--cg-text-lg) * var(--cogenta-font-scale));
-  --cg-text-2xl: calc(var(--cg-text-xl) * var(--cogenta-font-scale));
-
-  --cg-measure: 68ch;
-  --cg-page: 76rem;
-}
-
-/* `space.density` is a token the render layer stamps as an attribute, because
-   CSS cannot branch on the *value* of a custom property portably yet. The
-   default above stands until it does. */
-:where([data-density="compact"]) {
-  --cg-density: 0.75;
-}
-
-:where([data-density="spacious"]) {
-  --cg-density: 1.35;
-}
-
-/* --------------------------------------------------------------------------
-   Document
-   -------------------------------------------------------------------------- */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  background: var(--cogenta-color-bg);
-  color: var(--cogenta-color-fg);
-  font-family: var(--cogenta-font-sans);
-  font-size: var(--cg-text-base);
-  /* Unitless, so it scales with each element's own font size instead of being
-     inherited as a fixed pixel height — the classic cause of clipped text at
-     200% zoom (WCAG 1.4.4). */
-  line-height: 1.6;
-  text-underline-offset: 0.15em;
-}
-
-img,
-video,
-iframe {
-  max-width: 100%;
-  height: auto;
-}
-
-img {
-  display: block;
-  object-fit: cover;
-}
-
-/* --------------------------------------------------------------------------
-   Focus, targets, motion — the three that decide whether AA holds
-   -------------------------------------------------------------------------- */
-
-:where(a, button, summary, [tabindex]):focus-visible {
-  /* Two solid pixels against the page, offset so it never sits on the glyphs.
-     `outline`, not `box-shadow`: it survives forced-colors mode. */
-  outline: 2px solid var(--cogenta-color-accent);
-  outline-offset: 2px;
-  border-radius: var(--cogenta-radius-sm);
-}
-
-/* WCAG 2.2 asks 24×24 minimum (2.5.8); 44×44 is the comfortable target and
-   costs nothing here. Applied to the theme's own controls only — an inline link
-   inside a paragraph is exempt, and padding it would break the text flow. */
-:where(.cg-action, .cg-faq__question, .cg-logo__link) {
-  min-block-size: 44px;
-  min-inline-size: 44px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  /* The `motion.reduced` token says the skin's motion may be removed. Nothing
-     in this theme conveys meaning through movement, so removing all of it is
-     safe — including the smooth scroll of the carousel, which is the one people
-     forget and which triggers vestibular symptoms. */
-  *,
-  *::before,
-  *::after {
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 1ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-.cg-skip-link {
-  position: absolute;
-  inset-inline-start: var(--cg-s2);
-  inset-block-start: calc(var(--cg-s2) * -8);
-  z-index: 10;
-  padding: var(--cg-s2) var(--cg-s4);
-  background: var(--cogenta-color-accent);
-  color: var(--cogenta-color-accentFg);
-  border-radius: var(--cogenta-radius-md);
-  /* Moved, never hidden: `display:none` would take it out of the tab order,
-     which is the whole point of a skip link (WCAG 2.4.1). */
-  transition: inset-block-start var(--cogenta-motion-duration) var(--cogenta-motion-easing);
-}
-
-.cg-skip-link:focus-visible {
-  inset-block-start: var(--cg-s2);
-}
-
-/* --------------------------------------------------------------------------
-   Layout
-   -------------------------------------------------------------------------- */
-
-.cg-main {
-  display: flow-root;
-}
-
-.cg-block {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  margin-block: var(--cg-s12);
-  padding-inline: var(--cg-s4);
-}
-
-.cg-page__title {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  margin-block: var(--cg-s12) var(--cg-s6);
-  padding-inline: var(--cg-s4);
-  font-size: var(--cg-text-2xl);
-  line-height: 1.15;
-}
-
-.cg-site-header,
-.cg-site-footer {
-  padding: var(--cg-s6) var(--cg-s4);
-  color: var(--cogenta-color-mutedFg);
-  background: var(--cogenta-color-muted);
-}
-
-.cg-site-header__inner,
-.cg-site-footer__inner {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-}
-
-/* --------------------------------------------------------------------------
-   Actions
-   -------------------------------------------------------------------------- */
-
-.cg-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--cg-s3);
-  margin: var(--cg-s6) 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.cg-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--cg-s2) var(--cg-s6);
-  border: 1px solid var(--cogenta-color-accent);
-  border-radius: var(--cogenta-radius-md);
-  font-weight: 600;
-  text-decoration: none;
-  transition: opacity var(--cogenta-motion-duration) var(--cogenta-motion-easing);
-}
-
-.cg-action[data-emphasis="primary"] {
-  background: var(--cogenta-color-accent);
-  color: var(--cogenta-color-accentFg);
-}
-
-.cg-action[data-emphasis="secondary"] {
-  background: transparent;
-  color: var(--cogenta-color-accent);
-}
-
-.cg-action:hover {
-  opacity: 0.9;
-}
-
-/* --------------------------------------------------------------------------
-   Blocks
-   -------------------------------------------------------------------------- */
-
-.cg-hero {
-  display: grid;
-  gap: var(--cg-s8);
-  align-items: center;
-}
-
-@media (min-width: 60rem) {
-  .cg-hero {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.cg-hero__eyebrow {
-  margin: 0 0 var(--cg-s2);
-  color: var(--cogenta-color-mutedFg);
-  font-size: var(--cg-text-sm);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.cg-hero__title {
-  margin: 0;
-  font-size: var(--cg-text-2xl);
-  line-height: 1.1;
-}
-
-.cg-hero__subtitle {
-  margin: var(--cg-s4) 0 0;
-  max-inline-size: var(--cg-measure);
-  font-size: var(--cg-text-md);
-  color: var(--cogenta-color-mutedFg);
-}
-
-.cg-hero__media img {
-  inline-size: 100%;
-  border-radius: var(--cogenta-radius-lg);
-  box-shadow: var(--cogenta-shadow-md);
-}
-
-.cg-prose {
-  max-inline-size: var(--cg-measure);
-  margin-inline: auto;
-}
-
-.cg-prose h2 {
-  margin-block: var(--cg-s12) var(--cg-s3);
-  font-size: var(--cg-text-xl);
-  line-height: 1.2;
-}
-
-.cg-prose h3 {
-  margin-block: var(--cg-s8) var(--cg-s2);
-  font-size: var(--cg-text-lg);
-}
-
-.cg-prose h4 {
-  margin-block: var(--cg-s6) var(--cg-s2);
-  font-size: var(--cg-text-md);
-}
-
-.cg-prose p,
-.cg-prose ul,
-.cg-prose ol {
-  margin-block: var(--cg-s4);
-}
-
-.cg-prose blockquote {
-  margin-inline: 0;
-  padding-inline-start: var(--cg-s4);
-  border-inline-start: 3px solid var(--cogenta-color-accent);
-  color: var(--cogenta-color-mutedFg);
-  font-family: var(--cogenta-font-serif);
-}
-
-.cg-prose code {
-  font-family: var(--cogenta-font-mono);
-  font-size: var(--cg-text-sm);
-  background: var(--cogenta-color-muted);
-  border-radius: var(--cogenta-radius-sm);
-  padding: 0.1em 0.3em;
-}
-
-.cg-prose__figure {
-  margin-inline: 0;
-}
-
-.cg-figure {
-  margin-inline: auto;
-}
-
-.cg-figure[data-align="start"],
-.cg-figure[data-align="end"] {
-  max-inline-size: calc(var(--cg-measure) / 2);
-}
-
-.cg-figure[data-align="start"] {
-  float: inline-start;
-  margin-inline-end: var(--cg-s6);
-}
-
-.cg-figure[data-align="end"] {
-  float: inline-end;
-  margin-inline-start: var(--cg-s6);
-}
-
-.cg-figure[data-align="full"] {
-  max-inline-size: none;
-  padding-inline: 0;
-}
-
-.cg-figure__media {
-  inline-size: 100%;
-  aspect-ratio: var(--cg-ratio, auto);
-  border-radius: var(--cogenta-radius-md);
-}
-
-.cg-figure__caption {
-  margin-block-start: var(--cg-s2);
-  color: var(--cogenta-color-mutedFg);
-  font-size: var(--cg-text-sm);
-}
-
-.cg-figure__credit::before {
-  content: " — ";
-}
-
-.cg-features__items,
-.cg-logos__items,
-.cg-gallery__items,
-.cg-collection__items,
-.cg-faq__items {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.cg-features__items {
-  display: grid;
-  gap: var(--cg-s8);
-  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-}
-
-.cg-feature__title {
-  margin: var(--cg-s2) 0;
-  font-size: var(--cg-text-md);
-}
-
-.cg-feature__text {
-  margin: 0;
-  color: var(--cogenta-color-mutedFg);
-}
-
-.cg-cta {
-  padding-block: var(--cg-s12);
-  background: var(--cogenta-color-muted);
-  border-radius: var(--cogenta-radius-lg);
-  text-align: center;
-}
-
-.cg-cta__title {
-  margin: 0;
-  font-size: var(--cg-text-xl);
-}
-
-.cg-cta__text {
-  margin: var(--cg-s3) auto 0;
-  max-inline-size: var(--cg-measure);
-  color: var(--cogenta-color-mutedFg);
-}
-
-.cg-cta .cg-actions {
-  justify-content: center;
-}
-
-.cg-gallery__items {
-  display: grid;
-  gap: var(--cg-s3);
-  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-}
-
-.cg-gallery[data-layout="masonry"] .cg-gallery__items {
-  display: block;
-  columns: 3 14rem;
-  column-gap: var(--cg-s3);
-}
-
-.cg-gallery[data-layout="masonry"] .cg-gallery__item {
-  break-inside: avoid;
-  margin-block-end: var(--cg-s3);
-}
-
-/* The whole carousel: a scroll-snapping row. No script, no auto-advance, and
-   the container is focusable so it can be scrolled from the keyboard. */
-.cg-gallery__viewport {
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  overscroll-behavior-inline: contain;
-}
-
-.cg-gallery[data-layout="carousel"] .cg-gallery__items {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(16rem, 40%);
-}
-
-.cg-gallery[data-layout="carousel"] .cg-gallery__item {
-  scroll-snap-align: start;
-}
-
-.cg-gallery__item img,
-.cg-collection img {
-  inline-size: 100%;
-  border-radius: var(--cogenta-radius-md);
-}
-
-.cg-quote {
-  max-inline-size: var(--cg-measure);
-  margin-inline: auto;
-}
-
-.cg-quote__text {
-  margin: 0;
-  font-family: var(--cogenta-font-serif);
-  font-size: var(--cg-text-lg);
-  line-height: 1.35;
-}
-
-.cg-quote__attribution {
-  display: flex;
-  align-items: center;
-  gap: var(--cg-s3);
-  margin-block-start: var(--cg-s4);
-  color: var(--cogenta-color-mutedFg);
-  font-size: var(--cg-text-sm);
-}
-
-.cg-quote__avatar {
-  inline-size: 3rem;
-  block-size: 3rem;
-  border-radius: 50%;
-}
-
-.cg-quote__author {
-  font-weight: 600;
-  color: var(--cogenta-color-fg);
-}
-
-.cg-faq__items {
-  border-block-start: 1px solid var(--cogenta-color-border);
-}
-
-.cg-faq__item {
-  border-block-end: 1px solid var(--cogenta-color-border);
-}
-
-.cg-faq__question {
-  display: flex;
-  align-items: center;
-  padding-block: var(--cg-s3);
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.cg-faq__answer {
-  padding-block-end: var(--cg-s3);
-  color: var(--cogenta-color-mutedFg);
-}
-
-.cg-stats__items {
-  display: grid;
-  gap: var(--cg-s8);
-  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  margin: 0;
-}
-
-/* Reading order is label then figure; the skin shows the figure first. The
-   markup is what a screen reader follows, so the two must not be conflated. */
-.cg-stat {
-  display: flex;
-  flex-direction: column-reverse;
-  gap: var(--cg-s1);
-}
-
-.cg-stat__value {
-  margin: 0;
-  font-size: var(--cg-text-2xl);
-  line-height: 1.1;
-  font-variant-numeric: tabular-nums;
-}
-
-.cg-stat__unit {
-  font-size: var(--cg-text-md);
-  color: var(--cogenta-color-mutedFg);
-}
-
-.cg-stat__label {
-  color: var(--cogenta-color-mutedFg);
-  font-size: var(--cg-text-sm);
-}
-
-.cg-logos__items {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--cg-s8);
-}
-
-.cg-logo__image {
-  block-size: 2.5rem;
-  inline-size: auto;
-  object-fit: contain;
-}
-
-.cg-logo__link {
-  display: inline-flex;
-  align-items: center;
-}
-
-.cg-collection__items {
-  display: grid;
-  gap: var(--cg-s8);
-}
-
-.cg-collection[data-layout="grid"] .cg-collection__items {
-  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-}
-
-.cg-collection[data-layout="carousel"] .cg-collection__items {
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(18rem, 45%);
-}
-
-.cg-collection__viewport {
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  overscroll-behavior-inline: contain;
-}
-
-.cg-entry__title {
-  margin: 0 0 var(--cg-s1);
-  font-size: var(--cg-text-md);
-}
-
-.cg-entry__date,
-.cg-entry__excerpt {
-  color: var(--cogenta-color-mutedFg);
-  font-size: var(--cg-text-sm);
-}
-
-.cg-embed {
-  aspect-ratio: var(--cg-ratio, 16 / 9);
-  max-inline-size: var(--cg-measure);
-  margin-inline: auto;
-}
-
-.cg-embed__frame {
-  inline-size: 100%;
-  block-size: 100%;
-  border: 0;
-  border-radius: var(--cogenta-radius-md);
-}
-
-/* The consent placeholder is a real card, not a grey box: it says what would be
-   loaded and offers a way out to the source. It requests nothing third-party. */
-.cg-embed__placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--cg-s3);
-  block-size: 100%;
-  padding: var(--cg-s6);
-  background: var(--cogenta-color-muted);
-  color: var(--cogenta-color-mutedFg);
-  border: 1px dashed var(--cogenta-color-border);
-  border-radius: var(--cogenta-radius-md);
-  text-align: center;
-}
-
-.cg-embed__notice {
-  margin: 0;
-}
-
-.cg-embed__link {
-  color: var(--cogenta-color-accent);
-}
+@import "./tokens.css";
+@import "./base.css";
+@import "./blocks.css";