@toybreaker/fiko 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024–2025 Toybreaker
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,168 @@
+# 404.css
+
+**A minimal, layered CSS foundation you override by design, not by accident.**
+
+[![npm](https://img.shields.io/npm/v/@toybreaker/fiko)](https://www.npmjs.com/package/@toybreaker/fiko)
+[![MIT License](https://img.shields.io/badge/license-MIT-green)](LICENSE)
+
+---
+
+## The Problem
+
+Modern CSS frameworks fall into two traps:
+
+1. **Too much opinion** — ship components that look like every other site, forcing you to fight the framework to express your brand.
+2. **Too much complexity** — utility-only systems (Tailwind, etc.) put all design decisions in HTML, making templates hard to read and refactor.
+
+404.css takes a third path: a minimal, layered foundation you override by design, not by accident.
+
+---
+
+## Install
+
+```bash
+npm install @toybreaker/fiko
+# or
+pnpm add @toybreaker/fiko
+```
+
+---
+
+## Usage
+
+### 1. Import the framework
+
+```css
+/* your project's index.css */
+@import "@toybreaker/fiko";
+```
+
+This imports `omg/` — the brand-agnostic framework. It declares six cascade layers and imports all `omg/` sheets in the correct order.
+
+### 2. Add your brand (copy the template)
+
+```bash
+# copy the starter brand files into your project
+cp node_modules/@toybreaker/fiko/template/000/ src/assets/404/000/ -r
+```
+
+Then import your brand tokens **after** the framework, inside the same layers:
+
+```css
+@import "@toybreaker/fiko";
+
+/* brand palette — loads in the tokens layer */
+@import url(./000/1client_vars.css) layer(tokens);
+
+/* semantic aliases (surface, text, cta) — loads in the theme layer */
+@import url(./000/2client_datatheme.css) layer(theme);
+
+/* element defaults, heading scale — loads in the theme layer */
+@import url(./000/3client_theme.css) layer(theme);
+```
+
+### 3. Customize your brand
+
+Edit `000/1client_vars.css` — change the hue angle for your brand color:
+
+```css
+--brand: oklch(0.55 0.19 28);   /* orange — change the hue (0–360) */
+```
+
+---
+
+## Architecture: `omg/` vs `000/`
+
+```
+404/
+├── omg/          ← THE FRAMEWORK — brand-agnostic, versioned, never touch
+│   ├── 0reset.css
+│   ├── 1vars.css       ← layout, spacing, typography tokens
+│   ├── 3base.css       ← element defaults
+│   ├── 4layout.css     ← container, grid, nav
+│   ├── 5components.css ← buttons, links, controls
+│   ├── 6states.css     ← data-state helpers
+│   └── utils/          ← atomic utility classes
+│
+└── 000/          ← YOUR BRAND — per-client, fully owned, never extracted
+    ├── 1client_vars.css      ← raw palette (OKLCH colors)
+    ├── 2client_datatheme.css ← semantic aliases (surface, text, cta…)
+    └── 3client_theme.css     ← element defaults, heading scale, brand specifics
+```
+
+**The rule:** if it could work on any website → `omg/`. If it's specific to one brand → `000/`.
+
+---
+
+## Cascade Layers
+
+```css
+@layer reset, tokens, theme, layout, components, utilities;
+```
+
+| Layer | Purpose |
+|---|---|
+| `reset` | Margin/padding zero, box-sizing, smooth scroll |
+| `tokens` | CSS custom properties: spacing, type, color |
+| `theme` | Semantic aliases + element defaults |
+| `layout` | Body, container, grid, nav |
+| `components` | Buttons, inputs, links |
+| `utilities` | Atomic helpers: `.hide`, `.flex`, `.center`, etc. |
+
+`@layer` makes specificity predictable. A utility class in `utilities` always beats a component in `components` — no `!important` wars.
+
+---
+
+## OKLCH Colors
+
+All color tokens use OKLCH:
+
+```css
+--brand: oklch(0.55 0.19 28);
+/* L = lightness (0–1), C = chroma (0–0.37), H = hue (0–360) */
+```
+
+- **Perceptually uniform** — same L value = same perceived lightness across hues
+- **Relative calculations** — `oklch(from var(--brand) calc(l + 0.08) c h)` = guaranteed lighter tint
+- **Wide gamut** — P3 and Rec2020 renders richer colors automatically
+
+---
+
+## Utilities
+
+| Class | Effect |
+|---|---|
+| `.hide` | `display: none` |
+| `.flex` | `display: flex` |
+| `.center` | flex center both axes |
+| `.pad_block_sm` | block padding small |
+| `.h1` – `.h6` | heading scale classes |
+| `.dim` | secondary text color + smaller size |
+| `.typewriter` | `max-width: 66ch; margin-inline: auto` |
+| `.aspect_square` | `aspect-ratio: 1` |
+| `.aspect_video` | `aspect-ratio: 16/9` |
+
+---
+
+## What 404.css Intentionally Does NOT Do
+
+- **No dark mode** — permanent light mode
+- **No JavaScript** — pure CSS
+- **No component library** — no `.card`, `.modal`, `.navbar` in `omg/`
+- **No magic class names** — every utility is obvious
+
+---
+
+## Pairing with Astro
+
+404.css was designed to pair with Astro scoped styles:
+
+- 404.css owns the global layer stack (reset → utilities)
+- Astro components own their own layout via `<style>` blocks
+- Zero specificity conflicts
+
+---
+
+## License
+
+MIT — Copyright (c) 2024–2025 Toybreaker

package/index.css

@@ -0,0 +1,51 @@
+/*!
+ * 🐉 404.css v0.1.0-alpha.1
+ * https://github.com/junglesta/404css
+ *
+ * Copyright (c) 2024–2025 Toybreaker
+ * Released under the MIT License
+ *
+ * An unknown modern CSS framework.
+ * Implementing issues gone 404. SMILING DX!
+ *
+ * ─────────────────────────────────────────────
+ * USAGE
+ *
+ * This file imports only the framework (omg/) layers.
+ * You must also supply your brand's 000/ files:
+ *
+ *   your-project/404.css
+ *   ├── @import "@junglesta/404css";          ← this file (tokens + layout + components + utils)
+ *   ├── @import "./000/1client_vars.css"  layer(tokens);
+ *   ├── @import "./000/2client_datatheme.css" layer(theme);
+ *   └── @import "./000/3client_theme.css"     layer(theme);
+ *
+ * Starter 000/ templates are in node_modules/@junglesta/404css/template/000/
+ * ─────────────────────────────────────────────
+ */
+
+/* CASCADING ORDER — declared first so all @imports know their place */
+@layer reset, tokens, theme, layout, components, utilities;
+
+/* RESET */
+@import url(omg/0reset.css) layer(reset);
+
+/* TOKENS — framework spacing, typography, motion */
+@import url(omg/1vars.css) layer(tokens);
+
+/* LAYOUT — element defaults, grid, container, states */
+@import url(omg/3base.css)   layer(layout);
+@import url(omg/4layout.css) layer(layout);
+@import url(omg/6states.css) layer(layout);
+
+/* COMPONENTS — buttons, links, controls */
+@import url(omg/5components.css) layer(components);
+
+/* UTILITIES — highest priority, no !important needed */
+@import url(omg/utils/text.css)       layer(utilities);
+@import url(omg/utils/visibility.css) layer(utilities);
+@import url(omg/utils/layout.css)     layer(utilities);
+@import url(omg/utils/spacing.css)    layer(utilities);
+@import url(omg/utils/aspect.css)     layer(utilities);
+@import url(omg/utils/gradients.css)  layer(utilities);
+@import url(omg/utils/misc.css)       layer(utilities);

package/omg/0reset.css

@@ -0,0 +1,55 @@
+/*! 🐉 404.css | MIT License */
+/* 0reset.css */
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  overflow-x: clip;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+  text-wrap: balance;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+img,
+video {
+  display: block;
+  max-width: 100%;
+  content-visibility: auto;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}

package/omg/1vars.css

@@ -0,0 +1,62 @@
+/*! 🐉 404.css | MIT License */
+/* 1vars.css — layout, spacing, typography tokens */
+/* Color tokens live in 000/1client_vars.css        */
+
+:root {
+  /* ── MOTION ─────────────────────────────────── */
+  --transition: 200ms ease-out;
+  --ease_out:   cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* ── SIZING ─────────────────────────────────── */
+  --tap_size:             clamp(42px, 5vw, 52px);
+  --radius:               6px;
+  --borderpx:             3px;
+  --sticky_header_height: 88px;  /* override in 000/ per client */
+  --maximise:             -1.5rem; /* negative container bleed  */
+
+  /* ── SPACING ─────────────────────────────────── */
+  --spaceH: 1.75svw;
+  --spaceV: 1.5svh;
+  --space:  calc(var(--spaceH) + var(--spaceV) / 2);
+  --breath: calc(var(--space) * 1.5);
+
+  /* ── BREAKPOINTS ─────────────────────────────── */
+  --bp_xs: 390px;
+  --bp_sm: 576px;
+  --bp_md: 768px;
+  --bp_lg: 992px;
+  --bp_xl: 1200px;
+  --max_window_width: 1400px;
+
+  /* ── CONTAINER WIDTHS ────────────────────────── */
+  --container_xs: var(--bp_xs);
+  --container_sm: calc(var(--bp_sm) - var(--breath) * 2);
+  --container_md: calc(var(--bp_md) - var(--breath) * 2);
+  --container_lg: calc(var(--bp_lg) - var(--breath) * 2);
+  --container_xl: calc(var(--bp_xl) - var(--breath) * 2);
+
+  /* ── TYPOGRAPHY ──────────────────────────────── */
+  --font_serif:      "Courier New", Courier, monospace;
+  --font_family:     system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+                     Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+  --line_height:     1.5;
+  --font_size:       clamp(1.1rem, 0.34vw + 0.92rem, 1.21rem);
+  --text_decoration: none;
+
+  /* weight scale */
+  --weight_100: 100;
+  --weight_200: 200;
+  --weight_300: 300;
+  --weight_400: 400;
+  --weight_500: 500;
+  --weight_600: 600;
+  --weight_700: 700;
+  --weight_800: 800;
+
+  /* semantic aliases */
+  --weight_thin:    var(--weight_400);
+  --weight_light:   var(--weight_500);
+  --weight_regular: var(--weight_600);
+  --weight_medium:  var(--weight_700);
+  --weight_bold:    var(--weight_800);
+}

package/omg/3base.css

@@ -0,0 +1,29 @@
+/*! 🐉 404.css | MIT License */
+/* 3base.css — element defaults */
+
+body {
+  font-family: var(--font_family);
+  font-size: var(--font_size);
+  line-height: var(--line_height);
+  background: var(--surface);
+  color: var(--text);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus_color, var(--primary));
+  outline-offset: 2px;
+}
+
+/* minimum tap target for accessibility */
+a {
+  min-height: var(--tap_size);
+}
+
+img,
+video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/omg/4layout.css

@@ -0,0 +1,76 @@
+/*! 🐉 404.css | MIT License */
+/* 4layout.css */
+
+/* Container implementation using container queries */
+.container {
+  /* Container query setup */
+  container-type: inline-size;
+  container-name: main-container;
+
+  /* Simplified width calculation using the pre-defined container width variables */
+  width: min(100% - (var(--breath) * 2), var(--container_xl));
+  margin-inline: auto;
+}
+
+/* Modern grid system with CSS Grid */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid_cols, 1), 1fr);
+  gap: var(--breath);
+}
+
+/* Responsive grid using container queries
+     This leverages the breakpoint variables defined in 1vars.css */
+@container main-container (min-width: var(--bp_sm)) {
+  .grid {
+    --grid_cols: 2;
+  }
+}
+
+@container main-container (min-width: var(--bp_md)) {
+  .grid {
+    --grid_cols: 3;
+  }
+}
+
+@container main-container (min-width: var(--bp_lg)) {
+  .grid {
+    --grid_cols: 4;
+  }
+}
+
+/* Modern navigation layout */
+nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1px;
+}
+
+nav ul,
+nav ol {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+nav li {
+  display: flex;
+  align-items: center;
+}
+
+/* Optional: Add responsive navigation behavior */
+@container main-container (max-width: var(--bp_sm)) {
+  nav {
+    flex-direction: column;
+  }
+
+  nav ul,
+  nav ol {
+    flex-direction: column;
+    width: 100%;
+  }
+}

package/omg/5components.css

@@ -0,0 +1,101 @@
+/*! 🐉 404.css | MIT License */
+/* 5components.css — interactive elements */
+
+/* BUTTON / INPUT — shape & layout */
+button,
+.button input[type="submit"],
+input[type="button"],
+input[type="reset"],
+[role="button"] {
+  height: var(--tap_size);
+  padding-inline: var(--spaceH);
+  border: var(--borderpx) solid var(--border_color, currentColor);
+  border-radius: var(--radius);
+  outline: none;
+  background-color: transparent;
+  color: inherit;
+  font-size: var(--font_size);
+  font-weight: var(--weight_bold);
+  text-align: center;
+  cursor: pointer;
+  transition:
+    background-color var(--transition),
+    border-color var(--transition),
+    color var(--transition),
+    box-shadow var(--transition);
+  user-select: none;
+}
+
+/* BUTTON CLASS — wraps a <button> inside an <a> */
+.button {
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  color: var(--text);
+  display: inline-flex;
+  font-weight: var(--weight_bold);
+  gap: var(--spaceV) var(--spaceH);
+  padding: calc(var(--spaceV) / 3) calc(var(--spaceH) / 3);
+  transition: transform 0.2s var(--ease_out);
+  user-select: none;
+}
+
+.button:hover,
+button:hover {
+  transform: translateY(3px);
+}
+
+/* LINK defaults */
+a:not(.underline),
+[role="link"] {
+  outline: none;
+  background-color: transparent;
+  color: var(--text);
+  text-decoration: var(--text_decoration);
+  transition:
+    background-color var(--transition),
+    color var(--transition),
+    text-decoration var(--transition),
+    box-shadow var(--transition);
+  user-select: none;
+}
+
+/* button inside link — reset decoration, inherit color from context */
+a button,
+a [role="button"],
+a input[type="submit"],
+a input[type="button"],
+a input[type="reset"] {
+  color: inherit;
+  text-decoration: none;
+  user-select: none;
+}
+
+/* CTA BUTTON — filled, primary action */
+.button_cta button {
+  background-color: var(--cta);
+  border-color: var(--cta);
+  color: var(--cta_text);
+}
+.button_cta:hover button {
+  background-color: var(--cta_hover);
+  border-color: var(--cta_hover);
+}
+
+/* SVG overflow fix */
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* STICKY HEADER */
+.controls {
+  height: var(--sticky_header_height);
+  min-height: var(--sticky_header_height);
+  max-height: var(--sticky_header_height);
+  user-select: none;
+}
+.controls.sticky {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}

package/omg/6states.css

@@ -0,0 +1,16 @@
+/*! 🐉 404.css | MIT License */
+/* 6states.css */
+
+[data-state="loading"] {
+  cursor: progress;
+  opacity: 0.7;
+}
+
+[data-state="disabled"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+[data-state="empty"] {
+  display: none;
+}

package/omg/utils/aspect.css

@@ -0,0 +1,61 @@
+/*! 🐉 404.css | MIT License */
+/* utils/aspect.css — aspect ratios, object-fit, object-position, clip */
+
+/* ── ASPECT CONTAINERS ───────────────────────────── */
+
+.aspect,
+.aspect_container {
+  position: relative;
+  width: 100%;
+
+  &:hover  { opacity: 0.95; }
+  &:active { transform: scale(0.985); }
+
+  & > img,
+  & > video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  & > .caption {
+    padding: var(--spaceV) var(--spaceH);
+    color: var(--text);
+  }
+}
+
+/* dynamic ratio via inline style */
+.aspect[style*="--ratio"],
+.aspect_container[style*="--ratio"] {
+  aspect-ratio: var(--ratio);
+}
+
+/* ── RATIOS ──────────────────────────────────────── */
+
+.ratio_1x1,  .aspect1_1  { aspect-ratio: 1 / 1;   }
+.ratio_4x3,  .aspect4_3  { aspect-ratio: 4 / 3;   }
+.ratio_3x4,  .aspect3_4  { aspect-ratio: 3 / 4;   }
+.ratio_3x5,  .aspect3_5  { aspect-ratio: 3 / 5;   }
+.ratio_16x9, .aspect16_9 { aspect-ratio: 16 / 9;  }
+.ratio_9x16, .aspect9_16 { aspect-ratio: 9 / 16;  }
+.ratio_2x1,  .aspect2_1  { aspect-ratio: 2 / 1;   }
+.ratio_1x2,  .aspect1_2  { aspect-ratio: 1 / 2;   }
+.ratio_21x9, .aspect21_9 { aspect-ratio: 21 / 9;  }
+
+.aspect_cinema,
+.aspect_cinemascope { aspect-ratio: 2.35 / 1; }
+
+/* ── OBJECT POSITION ─────────────────────────────── */
+
+.focus_center > img { object-position: center; }
+.focus_top    > img { object-position: top;    }
+.focus_bottom > img { object-position: bottom; }
+.focus_left   > img { object-position: left;   }
+.focus_right  > img { object-position: right;  }
+
+/* ── CLIP ────────────────────────────────────────── */
+
+.clip_none      > img { clip-path: none;                  }
+.clip_letterbox > img { clip-path: inset(15% 0);          }
+.clip_pillarbox > img { clip-path: inset(0 15%);          }
+.clip_custom    > img { clip-path: inset(10% 5% 10% 5%);  }

package/omg/utils/gradients.css

@@ -0,0 +1,5 @@
+/*! 🐉 404.css | MIT License */
+/* utils/gradients.css — gradient utility classes */
+
+.gradient_brand { background: var(--gradient_brand); }
+.gradient_warm  { background: var(--gradient_warm);  }

package/omg/utils/layout.css

@@ -0,0 +1,27 @@
+/*! 🐉 404.css | MIT License */
+/* utils/layout.css — flex, positioning, writing mode */
+
+.flex {
+  display: flex;
+}
+
+.flex_col {
+  flex-direction: column;
+}
+
+.sticky {
+  position: sticky;
+  top: 0;
+}
+
+.vertical {
+  display: block;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  text-transform: uppercase;
+  position: relative;
+  top: -10px;
+  .active & {
+    font-size: 200%;
+  }
+}

package/omg/utils/misc.css

@@ -0,0 +1,9 @@
+/*! 🐉 404.css | MIT License */
+/* utils/misc.css — one-off component state overrides */
+
+.adv {
+  opacity: 0.5;
+  #icn_whatsapp {
+    filter: grayscale(88%);
+  }
+}

package/omg/utils/spacing.css

@@ -0,0 +1,40 @@
+/*! 🐉 404.css | MIT License */
+/* utils/spacing.css — gap, padding, spacer blocks */
+/* No !important needed — utilities layer is highest priority in cascade */
+
+/* ── GAPS ─────────────────────────────────────────── */
+
+.gap_sm { gap: var(--spaceV) var(--spaceH); }
+.gap_md { gap: calc(var(--spaceV) * 2) calc(var(--spaceH) * 2); }
+.gap_lg { gap: calc(var(--spaceV) * 3) calc(var(--spaceH) * 3); }
+
+/* ── PADDING BLOCKS ──────────────────────────────── */
+
+.pad_block_sm  { padding-block: calc(var(--spaceV) * 1.5); }
+.pad_block_md  { padding-block: calc(var(--spaceV) * 3);   }
+.pad_block_lg  { padding-block: calc(var(--spaceV) * 6);   }
+.pad_block_xl  { padding-block: calc(var(--spaceV) * 9);   }
+.pad_block_xxl { padding-block: calc(var(--spaceV) * 12);  }
+
+.pad_top_sm  { padding-top: calc(var(--spaceV) * 1.5); }
+.pad_top_md  { padding-top: calc(var(--spaceV) * 3);   }
+.pad_top_lg  { padding-top: calc(var(--spaceV) * 6);   }
+.pad_top_xl  { padding-top: calc(var(--spaceV) * 9);   }
+.pad_top_xxl { padding-top: calc(var(--spaceV) * 12);  }
+
+.pad_bottom_sm  { padding-bottom: calc(var(--spaceV) * 1.5); }
+.pad_bottom_md  { padding-bottom: calc(var(--spaceV) * 3);   }
+.pad_bottom_lg  { padding-bottom: calc(var(--spaceV) * 6);   }
+.pad_bottom_xl  { padding-bottom: calc(var(--spaceV) * 9);   }
+.pad_bottom_xxl { padding-bottom: calc(var(--spaceV) * 12);  }
+
+.top_padding { padding-top: var(--spaceV); }
+
+/* ── SPACER BLOCKS ───────────────────────────────── */
+
+.spacer_block_xs  { min-height: 1svh;   max-height: 88px;  }
+.spacer_block_sm  { min-height: 2.5svh; max-height: 100px; }
+.spacer_block_md  { min-height: 5svh;   max-height: 133px; }
+.spacer_block_lg  { min-height: 10svh;  max-height: 200px; }
+.spacer_block_xl  { min-height: 15svh;  max-height: 250px; }
+.spacer_block_xxl { min-height: 20svh;  max-height: 400px; }

package/omg/utils/text.css

@@ -0,0 +1,27 @@
+/*! 🐉 404.css | MIT License */
+/* utils/text.css — text alignment, transform, wrap */
+
+.center,
+.centre,
+.centered {
+  text-align: center;
+}
+
+.uppercase,
+.uppercase > * {
+  text-transform: uppercase !important;
+}
+
+.capitalize,
+.capitalise,
+.titlecase {
+  text-transform: capitalize;
+}
+
+.strikethrough {
+  text-decoration: line-through;
+}
+
+.pretty {
+  text-wrap: pretty;
+}

package/omg/utils/visibility.css

@@ -0,0 +1,45 @@
+/*! 🐉 404.css | MIT License */
+/* utils/visibility.css — show/hide, screen reader, print */
+
+.hide,
+.hidden {
+  display: none !important;
+}
+
+.hide.not {
+  display: block !important;
+}
+
+.maybe_hide {
+  display: none !important;
+}
+@media screen and (min-width: 480px) {
+  .maybe_hide {
+    display: inline !important;
+  }
+}
+
+.is_empty_hide {
+  display: none;
+}
+
+/* visually hidden but accessible to screen readers */
+.visually_hidden,
+.sr_only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(100%);
+  white-space: nowrap;
+  border: 0;
+  user-select: none;
+}
+
+@media print {
+  .print_hidden {
+    display: none !important;
+  }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@toybreaker/fiko",
+  "version": "0.1.0-alpha.1",
+  "description": "An unknown modern CSS framework. Implementing issues gone 404. SMILING DX!",
+  "license": "MIT",
+  "author": "Toybreaker <hello@junglestar.co>",
+  "homepage": "https://github.com/junglesta/fiko",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/junglesta/fiko.git"
+  },
+  "bugs": {
+    "url": "https://github.com/junglesta/fiko/issues"
+  },
+  "keywords": [
+    "css",
+    "framework",
+    "cascade-layers",
+    "oklch",
+    "design-tokens",
+    "utility-css",
+    "modern-css"
+  ],
+  "main": "index.css",
+  "style": "index.css",
+  "exports": {
+    ".": "./index.css",
+    "./template/*": "./template/*",
+    "./omg/*": "./omg/*"
+  },
+  "files": [
+    "index.css",
+    "omg/",
+    "template/"
+  ]
+}

package/template/000/1client_vars.css

@@ -0,0 +1,40 @@
+/*! 🐉 404.css | MIT License */
+/* 000/1client_vars.css — brand palette tokens
+ *
+ * Copy this file into your project's 000/ folder.
+ * Customize the values below for your brand.
+ * This file loads in the `tokens` layer alongside omg/1vars.css.
+ */
+
+:root {
+  /* ── NEUTRALS ──────────────────────────────────── */
+  --dark:    oklch(0.20 0 0);
+  --darkT25: color-mix(in oklch, var(--dark),  transparent 75%);
+  --darkT50: color-mix(in oklch, var(--dark),  transparent 50%);
+
+  --light:    oklch(0.97 0 0);
+  --lightT25: color-mix(in oklch, var(--light), transparent 75%);
+  --lightT50: color-mix(in oklch, var(--light), transparent 50%);
+
+  /* ── BRAND COLOR ───────────────────────────────── */
+  /* Change the hue (0–360) to match your brand.
+   * Lightness (0–1) and chroma (0–0.37) control shade and saturation.
+   * Examples:
+   *   red       oklch(0.55 0.22   20)
+   *   orange    oklch(0.55 0.19   40)
+   *   green     oklch(0.45 0.18  145)
+   *   blue      oklch(0.50 0.20  250)
+   *   purple    oklch(0.45 0.22  290)
+   */
+  --brand:         oklch(0.55 0.19 28);   /* ← change me */
+  --brand_lighter: oklch(from var(--brand) calc(l + 0.08) c h);
+  --brand_darker:  oklch(from var(--brand) calc(l - 0.18) c h);
+  --brandT25:      color-mix(in oklch, var(--brand), transparent 75%);
+  --brandT50:      color-mix(in oklch, var(--brand), transparent 50%);
+
+  /* ── PAGE SURFACES ─────────────────────────────── */
+  /* --surface is defined in 2client_datatheme.css as var(--light).
+   * Add custom section surfaces here as needed, e.g.:
+   *   --surface_hero: oklch(0.92 0.02 var(--brand-hue));
+   */
+}

package/template/000/2client_datatheme.css

@@ -0,0 +1,34 @@
+/*! 🐉 404.css | MIT License */
+/* 000/2client_datatheme.css — semantic theme aliases
+ *
+ * Maps raw palette tokens (from 1client_vars.css) to semantic roles.
+ * This file loads in the `theme` layer.
+ * Permanent light mode — dark mode intentionally excluded.
+ */
+
+:root {
+  /* ── SURFACE & TEXT ───────────────────────────────── */
+  --surface:            var(--light);
+  --surface_inverse:    var(--dark);
+  --surfaceT25:         var(--lightT25);
+  --surface_inverseT25: var(--darkT25);
+  --text:               var(--dark);
+  --textT50:            var(--darkT50);
+
+  /* ── LOGO ─────────────────────────────────────────── */
+  --logo: var(--dark);
+
+  /* ── BRAND — identity (logo, icons, decorative) ───── */
+  --primary:       var(--brand);
+  --primary_hover: var(--brand_lighter);
+  --contrast:      var(--brand_darker);
+
+  /* ── CTA — interactive (buttons, links, actions) ──── */
+  --cta:       var(--brand);
+  --cta_text:  var(--light);
+  --cta_hover: var(--brand_lighter);
+
+  /* ── BORDERS & FOCUS ──────────────────────────────── */
+  --border_color: var(--dark);
+  --focus_color:  var(--brand);
+}

package/template/000/3client_theme.css

@@ -0,0 +1,37 @@
+/*! 🐉 404.css | MIT License */
+/* 000/3client_theme.css — element & component defaults
+ *
+ * Brand-specific overrides that sit on top of the framework.
+ * Loaded in the `theme` layer — below utilities, above components.
+ * Customize freely. All rules here are brand-specific, not framework rules.
+ */
+
+/* ── TYPOGRAPHY SCALE ─────────────────────────────────────────── */
+
+.h1 { font-size: calc(var(--font_size) * 2.5)  !important; font-weight: var(--weight_light) !important; }
+.h2 { font-size: calc(var(--font_size) * 2.0)  !important; font-weight: var(--weight_light) !important; }
+.h3 { font-size: calc(var(--font_size) * 1.75) !important; font-weight: var(--weight_thin)  !important; }
+.h4 { font-size: calc(var(--font_size) * 1.5)  !important; font-weight: var(--weight_thin)  !important; }
+.h5 { font-size: calc(var(--font_size) * 1.25) !important; font-weight: var(--weight_thin)  !important; }
+.h6 { font-size: calc(var(--font_size) * 1.0)  !important; font-weight: var(--weight_light) !important; }
+
+/* ── DIM — secondary text ──────────────────────────────────────── */
+
+.dim {
+  color: var(--textT50);
+  font-size: calc(var(--font_size) * 0.85);
+}
+
+/* ── UNDERLINE LINK ─────────────────────────────────────────────  */
+
+.underline {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* ── TYPEWRITER — constrained readable prose column ─────────────── */
+
+.typewriter {
+  max-width: 66ch;
+  margin-inline: auto;
+}