/* © 2026 MEK.txt. All rights reserved. Part of the MEK design system; not licensed for reuse. */
/* MEK design system · part: extruded type
   A type style, not a layout: .extrude on any pixel text, in any MEK face and at any size. The glyphs are extruded one
   font pixel straight down, and (with js/extrude.js) their top-facing pixels get a 1px shine. Pixel-true: the
   extrusion is a hard copy of the glyphs, never blurred, and it keeps the text's own colour on top.
   One font pixel is the font size ÷ the face's grid: Dosage and MonoMEK 12, MEKMODE 10, MEK Sans 15, MEKZANTINE 18.
   So set extruded text on its face's grid (72 in Dosage is a 6px extrusion, 72 in MEKZANTINE 4px).
   .extrude-outline is its outlined sibling: the glyphs in three bands (white, the text's colour, a
   step darker), a ground-coloured copy one font pixel down, and a 1px outline round both, square-cornered.
   Opt-in: link it after mek.css, and js/extrude.js for the shine. In the mek.parts layer, so a project's CSS wins. */

@layer mek.parts {

/* ---------- Dials ----------
   A project can set these on :root or on one element. --extrude-grid isn't set by default: js/extrude.js reads the
   face and picks its grid. Set it to force one (and for the CSS-only extrusion, which assumes Dosage's 12). */
:where(:root, [data-theme]) {
  --extrude-depth: var(--600);        /* the extrusion's ink, set again in each theme so it follows an area's own */
  --extrude-flat: 0;                  /* 1: no extrusion and no shine here, the text set plain */
}
/* Not in the Light theme: on a white ground it reads as a drop shadow, not as type with depth. Any area in another
   theme (a box with its own data-theme) still extrudes. A project can turn a theme on or off:
   [data-theme="light"] { --extrude-flat: 0; --extrude-depth: var(--600); }   or   [data-theme="bw"] { --extrude-flat: 1; } */
:where([data-theme="light"]) {
  --extrude-depth: transparent;       /* so the CSS-only extrusion disappears too */
  --extrude-flat: 1;
}
:where(:root) {
  --extrude-shine: soft-light;        /* the 1px shine on top-facing pixels: a blend mode, or none */
  --extrude-shine-alpha: 1;           /* at this strength */
  --extrude-shine-ink: var(--white);  /* pure white, in every theme */
}

/* ---------- The style ---------- */
.extrude {
  text-shadow: 0 calc(1em / var(--extrude-grid, 12)) 0 var(--extrude-depth);
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: auto;
}
/* With js/extrude.js the extrusion and the shine come from one SVG filter per element, drawn from the glyphs' own
   pixels on the face's own grid, so the text-shadow steps aside. */
.extrude.extrude-lit { text-shadow: none; filter: var(--extrude-filter); }
.extrude-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.extrude-defs .extrude-depth { flood-color: var(--extrude-depth); }
.extrude-defs .extrude-shine { flood-color: var(--extrude-shine-ink); flood-opacity: var(--extrude-shine-alpha); }
.extrude-shine-off .extrude-defs .extrude-shine { flood-opacity: 0; }
.extrude.extrude-flat { text-shadow: none; filter: none; }   /* --extrude-flat: 1 (js/extrude.js sets the class) */


/* ---------- Outlined: .extrude-outline ----------
   Live text (editable, selectable) on a block or inline-block of its own. Inside the glyphs, the x-height (the
   shortest letters) cut in thirds by whole font pixels from the baseline: the bottom third --extrude-outline-low (a
   step darker), the middle --extrude-outline-middle (the text's own colour), the top third and everything above it
   --extrude-outline-top (white). So a lowercase letter is even thirds and a capital carries more white.
   Behind: the glyphs one font pixel down in --extrude-outline-ground (the ground they sit on, so the counters stay
   open), and a 1px outline of glyphs and copy together in --extrude-outline-ink, edges only (no corner pixels).
   js/extrude.js draws the copy and outline exactly and finds the face's grid and baseline; without it the outline
   is a CSS stand-in with corners, on a 12 grid and Dosage's baseline.
   On in every theme, Light too. A faithful theme mixes nothing: the theme's white, the quiet accent below, ink 600. */
/* The steps, as in the sketch they came from (green7, green5, green3): white on top, the text's colour, then a step
   down that keeps its chroma and turns toward yellow, and the outline darker and greyer still. Hue-shifted in OKLCH
   where the browser can (relative colour); a plain mix toward the ground where it can't. */
:where(:root, [data-theme]) {
  --extrude-outline-top: var(--white);
  --extrude-outline-middle: currentColor;
  --extrude-outline-low: color-mix(in srgb, var(--500-accent) calc(var(--faithful) * 100%), color-mix(in srgb, currentColor 75%, var(--bg)));
  --extrude-outline-ink: color-mix(in srgb, var(--600) calc(var(--faithful) * 100%), color-mix(in srgb, currentColor 35%, var(--bg)));
  --extrude-outline-ground: var(--bg);
}
@supports (color: oklch(from red l c h)) {
  :where(:root, [data-theme]) {
    --extrude-outline-low: color-mix(in srgb, var(--500-accent) calc(var(--faithful) * 100%), oklch(from currentColor calc(l - 0.16) calc(c * 1.05) calc(h - 10)));
    --extrude-outline-ink: color-mix(in srgb, var(--600) calc(var(--faithful) * 100%), oklch(from currentColor calc(l - 0.37) calc(c * 0.6) calc(h - 6)));
  }
}
/* Light, as its own sketch: on white the letters go pale. White on top, then one pale fill of the text's colour
   (middle and low alike), a quiet grey of it for the outline, and the copy below dark, in a warm grey, so the
   letters stand on a shadow rather than vanish into the ground. From #3737ff: #cbdbfc, #9badb7, #4c4147. */
:where([data-theme="light"]) {
  --extrude-outline-middle: color-mix(in srgb, currentColor 22%, var(--white));
  --extrude-outline-low: var(--extrude-outline-middle);
  --extrude-outline-ink: color-mix(in srgb, currentColor 10%, var(--700));
  --extrude-outline-ground: color-mix(in srgb, currentColor 6%, var(--800));
}
@supports (color: oklch(from red l c h)) {
  :where([data-theme="light"]) {
    --extrude-outline-middle: oklch(from currentColor 0.89 calc(c * 0.18) calc(h - 5));
    --extrude-outline-ink: oklch(from currentColor 0.74 calc(c * 0.09) calc(h - 38));
    --extrude-outline-ground: oklch(from currentColor 0.39 calc(c * 0.065) calc(h + 73));
  }
}
.extrude-outline {
  --xo-px: calc(1em / var(--extrude-grid, 12));
  /* the baseline from the top of a line: half the line plus half (ascent - descent), Dosage's 0.375em by default */
  --xo-base: round(down, 0.5lh + var(--xo-mid, 0.375em), 1px);
  --xo-third: round(var(--xo-x, 6) / 3);   /* the x-height in font pixels (Dosage's 6), a third of it */
  background: repeating-linear-gradient(to bottom,
    var(--extrude-outline-top) 0 calc(var(--xo-base) - 2 * var(--xo-third) * var(--xo-px)),
    var(--extrude-outline-middle) 0 calc(var(--xo-base) - var(--xo-third) * var(--xo-px)),
    var(--extrude-outline-low) 0 1lh) content-box;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  caret-color: currentColor;
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: auto;
  filter: drop-shadow(0 var(--xo-px) 0 var(--extrude-outline-ground))
    drop-shadow(var(--xo-px) 0 0 var(--extrude-outline-ink)) drop-shadow(calc(-1 * var(--xo-px)) 0 0 var(--extrude-outline-ink))
    drop-shadow(0 var(--xo-px) 0 var(--extrude-outline-ink)) drop-shadow(0 calc(-1 * var(--xo-px)) 0 var(--extrude-outline-ink));
}
.extrude-outline.extrude-lit { filter: var(--extrude-filter); }
.extrude-defs .extrude-outline-ink { flood-color: var(--extrude-outline-ink); }
.extrude-defs .extrude-outline-ground { flood-color: var(--extrude-outline-ground); }

} /* @layer mek.parts */