its-swiss 0.1.0

data/app/assets/stylesheets/its_swiss/components.css

@@ -0,0 +1,403 @@
+/* Components.
+ *
+ * Separation is done with hairlines and whitespace. There are no cards, no
+ * rounded corners and no shadows in this file, and nothing is set in
+ * capitals. A component here says only how it differs from the registers and
+ * the two arrangements already declared in type.css and grid.css.
+ *
+ * Every one of these is laid out on its own, in flex, and never on the page's
+ * field. The field is the application's — a component that placed itself on
+ * it would be a component that broke the moment the application decided its
+ * problem had eight fields rather than six.
+ */
+
+@layer its-swiss.components {
+  /* --- Masthead and navigation -------------------------------------------
+     A band, a mark at one end, the destinations at the other, and a hairline
+     underneath. The mark is the application's to fill; the library only knows
+     that it does not break and that the nav sits beside it. */
+
+  .masthead {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--space-2) var(--space-4);
+    padding-block: var(--space-3);
+    border-bottom: var(--rule-hair) solid var(--rule);
+  }
+
+  /* A wordmark is not free text and may not be broken, either inside itself
+     or away from whatever leads it. */
+  .masthead__mark {
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    white-space: nowrap;
+  }
+
+  .masthead__mark a { text-decoration: none; }
+
+  .masthead__mark a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
+
+  /* Off the left edge rather than pushed to the right: the asymmetry is the
+     point, and it lines the nav up with the body column below it. An
+     application that wants it flush right sets margin-inline-start: auto,
+     which is one line in its own stylesheet. */
+  .nav {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--space-3);
+  }
+
+  .nav a { text-decoration: none; }
+
+  .nav a:hover { color: var(--ink); }
+
+  /* Where you are, said twice. Colour alone is not a signal — a reader who
+     cannot separate the accent from the quiet gray would have no current
+     state at all — so the weight says it as well. */
+  .nav [aria-current="page"] {
+    color: var(--accent);
+    font-weight: 700;
+  }
+
+  /* --- Footer -------------------------------------------------------------
+     A hairline, the micro register, and whatever the application has to say
+     after the page. It carries no links of its own: what belongs down there
+     is not something a library can know. */
+
+  .footer {
+    margin-top: var(--space-13);
+    padding-block: var(--space-3);
+    border-top: var(--rule-hair) solid var(--rule);
+    font-size: var(--size-1);
+    line-height: var(--space-3);
+  }
+
+  /* --- Rules --------------------------------------------------------------
+     The one horizontal mark in the style, at the two weights tokens.css
+     declares. */
+
+  hr {
+    height: 0;
+    border: 0;
+    border-top: var(--rule-hair) solid var(--rule);
+    margin-block: var(--space-3);
+  }
+
+  hr.rule--heavy { border-top-width: var(--rule-heavy); border-color: var(--ink); }
+
+  /* --- Table --------------------------------------------------------------
+     A grid of values, ruled horizontally and not vertically: the columns are
+     already held apart by the type, and a vertical rule between them draws a
+     box, which this style does not do. No zebra striping for the same reason
+     — a filled row is a filled area, and filled areas are the accent's alone.
+
+     Figures are tabular, because a column of numbers is read down. */
+
+  .table { width: 100%; }
+
+  .table caption {
+    color: var(--ink-quiet);
+    margin-bottom: var(--space-1);
+  }
+
+  .table th,
+  .table td {
+    padding-block: var(--space-1);
+    padding-inline-end: var(--space-3);
+    border-bottom: var(--rule-hair) solid var(--rule);
+    vertical-align: baseline;
+  }
+
+  .table th {
+    color: var(--ink-quiet);
+    font-weight: 700;
+  }
+
+  .table thead th { border-bottom-color: var(--ink); }
+
+  .table td:last-child,
+  .table th:last-child { padding-inline-end: 0; }
+
+  /* A column of numbers reads right-aligned against its own heading. */
+  .table .numeric { text-align: right; padding-inline: var(--space-3) 0; }
+
+  /* --- Definition list ----------------------------------------------------
+     Term and value in two columns, the term set in the quiet register and the
+     value in ink. The weight tells them apart at a glance rather than making
+     a reader count characters. */
+
+  .pairs {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    column-gap: var(--space-3);
+    row-gap: var(--space-1);
+  }
+
+  .pairs dt { font-weight: 700; }
+
+  /* When the terms are long enough that a two-column set leaves the values
+     stranded across the page. */
+  .pairs--stacked {
+    grid-template-columns: 1fr;
+    row-gap: 0;
+  }
+
+  .pairs--stacked dt { margin-top: var(--space-2); }
+
+  .pairs--stacked dt:first-child { margin-top: 0; }
+
+  /* --- Forms --------------------------------------------------------------
+     A field is a label, a control and, when there is something to say, a
+     hint or the reason it was refused. The control is a rule under the text
+     rather than a box around it: the box is a border drawn for its own sake,
+     and this style does not draw them. */
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-3);
+    max-width: var(--measure);
+  }
+
+  .form--inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--space-2);
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    width: 100%;
+  }
+
+  .field--inline {
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--space-2);
+  }
+
+  .field input,
+  .field select,
+  .field textarea {
+    width: 100%;
+    border: 0;
+    border-bottom: var(--rule-hair) solid var(--ink);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    /* No padding above it: the rule belongs under the text, not a line's
+       height below it, or the label reads as belonging to nothing. */
+    padding-block: 0 var(--space-1);
+  }
+
+  .field textarea { resize: vertical; }
+
+  /* A checkbox or a radio is the one control whose label sits beside it. */
+  .choice {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--space-1);
+  }
+
+  .choice input { width: auto; border: revert; }
+
+  /* Refused. The accent is the whole signal here and it is a rule, not a
+     fill: the field is still the field. */
+  .field--invalid input,
+  .field--invalid select,
+  .field--invalid textarea { border-bottom-color: var(--accent); }
+
+  .field__error {
+    color: var(--accent);
+    font-size: var(--size-1);
+    line-height: var(--space-2);
+  }
+
+  /* --- Buttons ------------------------------------------------------------
+     A button is a block; a link is underlined text. Both at once leaves the
+     page saying "follow me" and "press me" in the same breath.
+
+     Every one of them is the same box, so a row of them sits on one line and
+     the only difference between them is what fills it. No radius, no shadow,
+     and the keyline is the hairline drawn everywhere else. */
+
+  .button {
+    display: inline-block;
+    border: var(--rule-hair) solid var(--rule);
+    background: transparent;
+    color: var(--ink);
+    font-family: inherit;
+    padding: var(--space-1) var(--space-2);
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .button:hover { border-color: var(--ink); }
+
+  /* A solid block, the way a Swiss poster sets a call to action. Ink rather
+     than the accent: the primary action is the one you were going to take,
+     and the accent is for the one you have to be told about. */
+  .button--primary {
+    border-color: var(--ink);
+    background: var(--ink);
+    color: var(--paper);
+  }
+
+  .button--primary:hover { border-color: var(--ink-quiet); background: var(--ink-quiet); }
+
+  /* The one filled area the accent gets, for the action a page exists to
+     offer. Used once per page or not at all. */
+  .button--accent {
+    border-color: var(--accent);
+    background: var(--accent);
+    color: var(--accent-ink);
+  }
+
+  .button--quiet:hover { color: var(--ink); }
+
+  /* Destroying and reordering are one shape apart from each other otherwise.
+     The page stays monochrome at rest; the accent arrives at the moment you
+     reach for the one thing that cannot be undone. Focus as well as hover,
+     because a keyboard reaches this button and touch never hovers at all. */
+  .button--danger:hover,
+  .button--danger:focus-visible {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+
+  /* Set apart before it is coloured: in a row of actions, destroying and
+     reordering are the same gray word otherwise, and a gap is read before a
+     word is.
+
+     A step on the ladder rather than an auto margin. Auto puts the gap at
+     whatever is left over, which in a narrow row is right and across a whole
+     page is most of a page — and an action a page away from the actions it
+     belongs with reads as a different control, not a separated one.
+
+     :has, because button_to wraps its button in a form, so the flex child is
+     the form and the margin belongs to the child. */
+  .run > :has(> .button--danger),
+  .run > .button--danger { margin-inline-start: var(--space-6); }
+
+  form.button_to { display: inline; }
+
+  .link-quiet { text-underline-offset: 0.25em; }
+
+  .link-quiet:hover { color: var(--ink); }
+
+  /* --- Copy ---------------------------------------------------------------
+     A value on screen to be taken somewhere else is a button that copies
+     itself. The value stays visible text inside it, which is what keeps it
+     usable when the clipboard is not available. */
+
+  .copy {
+    border: 0;
+    padding: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .copy::after {
+    content: "";
+    color: var(--ink-quiet);
+    font-weight: 400;
+    letter-spacing: 0;
+  }
+
+  .copy:hover::after,
+  .copy:focus-visible::after { content: " copy"; }
+
+  /* Says it worked, in the one place you are already looking. */
+  .copy[data-copied]::after,
+  .copy[data-copied]:hover::after { content: " copied"; color: var(--accent); }
+
+  /* --- Pagination ---------------------------------------------------------
+     A run of numbers under a hairline. The current page carries weight as
+     well as the accent, for the same reason the current nav item does. */
+
+  .pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--space-1) var(--space-2);
+    margin-top: var(--space-5);
+    padding-top: var(--space-2);
+    border-top: var(--rule-hair) solid var(--rule);
+  }
+
+  /* inline-block so the line box is the tap target: an inline box takes its
+     height from the font's metrics and ignores the leading set for it. */
+  .pagination a,
+  .pagination [aria-current] { display: inline-block; }
+
+  .pagination a { color: var(--ink-quiet); text-underline-offset: 0.25em; }
+
+  .pagination a:hover { color: var(--ink); }
+
+  .pagination [aria-current] {
+    color: var(--accent);
+    font-weight: 700;
+  }
+
+  .pagination__gap { color: var(--ink-quiet); }
+
+  /* --- What a page has to say --------------------------------------------
+     Three registers: it worked, it was refused, there is nothing here. The
+     refusal is the only one that interrupts, and it interrupts with a rule
+     rather than a filled panel. */
+
+  .errors {
+    width: 100%;
+    padding-top: var(--space-2);
+    border-top: var(--rule-heavy) solid var(--accent);
+  }
+
+  .errors__title { font-weight: 700; }
+
+  .errors ul {
+    color: var(--ink-quiet);
+    margin-top: var(--space-1);
+  }
+
+  .empty { color: var(--ink-quiet); }
+
+  /* --- Off screen ---------------------------------------------------------
+     For text that has to exist without being seen. Clipped rather than hidden
+     with display or visibility, because both of those take the element out of
+     the accessibility tree as well as off the page, which is the one thing
+     this must not do. */
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* The way past the masthead for a keyboard. Off screen until it is focused,
+     at which point it has to be somewhere you can read it. */
+  .skip-link {
+    position: absolute;
+    left: var(--space-2);
+    top: var(--space-2);
+    z-index: 1;
+    padding: var(--space-1) var(--space-2);
+    background: var(--paper);
+    border: var(--rule-hair) solid var(--ink);
+    transform: translateY(calc(-100% - var(--space-4)));
+  }
+
+  .skip-link:focus { transform: none; }
+}

data/app/assets/stylesheets/its_swiss/grid.css

@@ -0,0 +1,67 @@
+/* Grid primitives.
+ *
+ * The library ships the machinery and never the grid: how many fields a page
+ * has depends on what it lays out, and a library that answered that for every
+ * application would be answering it for none of them. An application declares
+ * --columns in its own stylesheet, and everything here re-proportions.
+ *
+ * Three primitives, and that is the whole file. A page, a field, and a way to
+ * say how many fields something takes.
+ */
+
+@layer its-swiss.grid {
+  /* The page: the one measured container, centred, with a margin that is a
+     step on the ladder rather than a number chosen for the look of it. */
+  .page {
+    max-width: var(--page-max);
+    margin-inline: auto;
+    padding-inline: var(--page-inset);
+  }
+
+  /* The field. Every list that has to line up with the page uses this same
+     track definition, which is the point of a modular grid and the thing
+     separate per-component grids can only manage by coincidence. */
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+    column-gap: var(--gutter);
+  }
+
+  /* Placement is the default and the exception is what gets written down. A
+     child says how many fields it wants by setting --span; a child that says
+     nothing runs the whole field, because that is what nearly everything on a
+     page does, and because an unplaced item silently taking one column is the
+     bug this replaces — a frame, a panel and a line of prose each took a
+     sixth of the page in turn before it was written this way round. */
+  .grid > * { grid-column: span var(--span, var(--columns)); }
+
+  /* A custom element has no default display, so it arrives on the field as an
+     unplaced inline box and takes whatever it wraps down with it. */
+  turbo-frame { display: block; }
+
+  /* Field-width helpers. An application sizes something to a run of fields
+     with these rather than with a measured rem value that lands between two
+     field lines. */
+  .measure { max-width: var(--measure); }
+
+  .fields { width: calc(var(--field) * var(--span, 1) + var(--gutter) * (var(--span, 1) - 1)); }
+
+  /* --- Runs and columns ---------------------------------------------------
+     Almost every horizontal arrangement in an interface is one thing: items
+     on a shared baseline, a space apart, wrapping when they must. Said once
+     here the way the field's tracks are, so a component below says only how
+     it differs. */
+  .run {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--space-2);
+  }
+
+  /* The same idea turned ninety degrees. */
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+}

data/app/assets/stylesheets/its_swiss/reset.css

@@ -0,0 +1,50 @@
+/* Reset. Only what the library's own type and spacing decisions require: a
+ * predictable box, no margins the ladder did not put there, and no list
+ * bullets, because a list in this style is set on the grid rather than
+ * indented behind a dot. */
+
+@layer its-swiss.reset {
+  *,
+  *::before,
+  *::after { box-sizing: border-box; }
+
+  html { -webkit-text-size-adjust: 100%; }
+
+  body {
+    margin: 0;
+    background: var(--paper);
+    color: var(--ink);
+  }
+
+  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend, blockquote {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul, ol { list-style: none; }
+
+  fieldset { border: 0; }
+
+  img, svg, video { max-width: 100%; display: block; }
+
+  /* A table is a grid of values, and a gap between its cells is a gap the
+     spacing ladder should be setting rather than the browser. */
+  table { border-collapse: collapse; border-spacing: 0; }
+
+  /* The browser hides [hidden] with display: none, and any author rule that
+     sets display at all outranks it — a .button says inline-block, so a
+     hidden button stays on the page. The attribute means hidden, so it is
+     made to mean it once, here, rather than remembered at every element that
+     might one day carry it. The library's one !important, and the reason it
+     needs one: the rule it has to beat is inside the same layer. */
+  [hidden] { display: none !important; }
+
+  a { color: inherit; }
+
+  /* The accent's first job. Unset it and this is an ink outline, which is
+     still a focus ring. */
+  :focus-visible {
+    outline: var(--rule-heavy) solid var(--accent);
+    outline-offset: 3px;
+  }
+}

data/app/assets/stylesheets/its_swiss/specimen.css

@@ -0,0 +1,37 @@
+/* The specimen's own furniture: the blocks of value, the field diagram, and
+ * the spacing between sections. Not part of the library — nothing here is a
+ * component an application should reach for. Loaded only by the specimen
+ * page, which is why it is not in ItsSwiss::STYLESHEETS.
+ */
+
+@layer its-swiss.specimen {
+  [data-specimen-take] { margin-top: var(--space-13); }
+
+  [data-specimen] { margin-top: var(--space-6); }
+
+  [data-specimen] > h3 { margin-bottom: var(--space-2); }
+
+  [data-specimen] > * + * { margin-top: var(--space-2); }
+
+  /* A block of value, the height of a line box so it sits on the baseline
+     beside the token that names it. */
+  .specimen__value {
+    display: block;
+    width: var(--space-13);
+    height: var(--space-3);
+    box-shadow: inset 0 0 0 var(--rule-hair) color-mix(in oklch, var(--ink) 12%, transparent);
+  }
+
+  /* The field, drawn. Each child is one span, and the bar inside it shows
+     where that span starts and stops against the page. */
+  .specimen__grid { row-gap: var(--space-1); }
+
+  .specimen__field {
+    display: block;
+    height: var(--space-2);
+    background: var(--value-2);
+  }
+
+  .specimen__grid > [style*="--span: 2"] .specimen__field,
+  .specimen__grid > [style*="--span: 4"] .specimen__field { background: var(--value-3); }
+}

data/app/assets/stylesheets/its_swiss/tokens.css

@@ -0,0 +1,142 @@
+/* Tokens.
+ *
+ * Every measurement and every value in the library is declared here and
+ * nowhere else. The four blocks below are the whole system: a value scale, an
+ * accent slot, a type scale, and one ladder for everything vertical.
+ *
+ * A consuming application fills three slots — the accent, the typeface, and
+ * how many fields its grid has. Everything else it inherits, and everything
+ * else it can still override, because these are unlayered properties read
+ * from inside a layer: setting --baseline in the application's own stylesheet
+ * reproportions the library without touching it.
+ */
+
+@layer its-swiss.tokens {
+  :root {
+    /* --- The value scale ---------------------------------------------------
+       Six steps of OKLCH lightness from paper to ink. OKLCH because the steps
+       have to be perceptually even to be read as a scale at all: the same
+       arithmetic in sRGB puts four of the six inside the top quarter of the
+       range and leaves the interface with two grays and a cliff.
+
+       The ladder is not evenly spaced, and that is the point. A hairline has
+       to be barely there, so the top of the scale is dense; the middle only
+       has to hold secondary text away from primary, so it is sparse. An even
+       ladder gives a usable mid-gray and no usable rule.
+
+       Neutral, because hue is the application's. Warmth arrives through the
+       two slots beneath: a consumer that wants Pandatone's warm grays sets
+       --value-chroma: 0.006 and --value-hue: 95 once, and the whole scale
+       turns together. */
+    --value-chroma: 0;
+    --value-hue: 0;
+
+    --value-0: oklch(98% var(--value-chroma) var(--value-hue));  /* paper */
+    --value-1: oklch(94% var(--value-chroma) var(--value-hue));  /* a shaded ground */
+    --value-2: oklch(89% var(--value-chroma) var(--value-hue));  /* a hairline */
+    --value-3: oklch(72% var(--value-chroma) var(--value-hue));  /* a rule that has to be seen */
+    --value-4: oklch(54% var(--value-chroma) var(--value-hue));  /* secondary text: 4.7:1 on paper */
+    --value-5: oklch(18% var(--value-chroma) var(--value-hue));  /* ink */
+
+    /* The names the rest of the library uses. Aliases rather than values of
+       their own, so the day the ground is darkened the ladder still describes
+       the page. */
+    --paper: var(--value-0);
+    --paper-shaded: var(--value-1);
+    --rule: var(--value-2);
+    --rule-strong: var(--value-3);
+    --ink-quiet: var(--value-4);
+    --ink: var(--value-5);
+
+    /* --- The accent --------------------------------------------------------
+       State and emphasis only: the current item, focus, a link, the one
+       primary action, the moment before something cannot be undone. Never a
+       filled area for its own sake.
+
+       Unset, it is ink. That is the library's argument in one line — if a
+       page reads correctly with the accent collapsed onto the value scale,
+       the values were doing the work. The specimen renders both ways for
+       exactly this reason. */
+    --accent: var(--ink);
+    /* What is legible on top of the accent when it is filled. */
+    --accent-ink: var(--paper);
+
+    /* --- Rules -------------------------------------------------------------
+       Two weights. A hairline separates; a heavier one interrupts, and is
+       kept for the two or three places a page has something to insist on. */
+    --rule-hair: 1px;
+    --rule-heavy: 2px;
+
+    /* --- Type --------------------------------------------------------------
+       Five sizes on an alternating 1.33 / 1.5 ratio, every one a multiple of
+       four. Five is the count an interface actually uses: labels, body, a
+       section, a subhead, a page title. A sixth gets chosen for a page and
+       then used nowhere else.
+
+       The family is the application's, for the same reason the accent is. A
+       library that ships a typeface ships a voice, and ships a binary with
+       it. The fallback stack below is what an application gets until it says
+       otherwise, and it is a grotesque, which is the tradition. */
+    --font-family: ui-sans-serif, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+    --size-1: 0.75rem;   /* 12 — labels and metadata */
+    --size-2: 1rem;      /* 16 — body */
+    --size-3: 1.5rem;    /* 24 — section */
+    --size-4: 2rem;      /* 32 — subhead, large values */
+    --size-5: 3rem;      /* 48 — page title */
+
+    /* --- The vertical ladder -----------------------------------------------
+       One ladder, numbered in baselines, used for leading as much as for
+       space. Two ladders — a set for space and another for line boxes — agree
+       at three values and diverge everywhere else, which is how a heading
+       ends up impossible to separate from the block beneath it by the height
+       of its own line: the value simply does not exist.
+
+       Changing --baseline reproportions everything. */
+    --baseline: 0.5rem;
+
+    --space-1: calc(var(--baseline) * 1);    /* 8 */
+    --space-2: calc(var(--baseline) * 2);    /* 16 */
+    --space-3: calc(var(--baseline) * 3);    /* 24 */
+    --space-4: calc(var(--baseline) * 4);    /* 32 */
+    --space-5: calc(var(--baseline) * 5);    /* 40 */
+    --space-6: calc(var(--baseline) * 6);    /* 48 */
+    --space-8: calc(var(--baseline) * 8);    /* 64 */
+    --space-13: calc(var(--baseline) * 13);  /* 104 */
+
+    /* --- The grid ----------------------------------------------------------
+       Primitives, not a grid. Six fields divide into halves and thirds and is
+       where an application starts; the point of declaring it here is that it
+       is one number to change, in the application's own stylesheet, once the
+       problem has said how many fields it has.
+
+       A field's width is derived rather than measured, and every width helper
+       in the library is built from it — which is what keeps a block of prose
+       stopping on a field line instead of three pixels short of one. */
+    --columns: 6;
+    --gutter: 1.5rem;
+    --page-max: 82rem;
+    --page-inset: var(--space-3);
+
+    /* The page's own margin comes out before the fields are divided. Left in,
+       every helper built on --field is a gutter and a half too wide, and prose
+       that is supposed to stop on the third field line stops past it — which
+       is invisible on a page with nothing beside the prose and glaring on one
+       with a column next to it. */
+    --field: calc(
+      (var(--page-max) - var(--page-inset) * 2 - var(--gutter) * (var(--columns) - 1)) / var(--columns)
+    );
+    --measure: calc(var(--field) * 3 + var(--gutter) * 2);
+
+    /* --- Transitions -------------------------------------------------------
+       The page crossfade is short enough to read as a replacement rather than
+       an animation. A morph runs longer, because the thing travelling has to
+       stay readable while it does. */
+    --transition-page: 180ms;
+    --transition-morph: 240ms;
+    --transition-ease: cubic-bezier(0.2, 0, 0.2, 1);
+
+    color-scheme: light;
+  }
+}