Initial commit

static/assets/fonts/.gitkeep

@@ -0,0 +1 @@
+

static/assets/images/.gitkeep

@@ -0,0 +1 @@
+

static/assets/images/cutout-block.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2134 2134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M2133.333,400l0,1333.333c0,220.766 -179.234,400 -400,400l-1333.333,0c-220.766,0 -400,-179.234 -400,-400l0,-1333.333c0,-220.766 179.234,-400 400,-400l1333.333,0c220.766,0 400,179.234 400,400Zm-400.047,334.954l221.363,0l0,-236.121l-221.363,0l0,236.121Zm-806.91,230.385c-20.078,-34.566 -48.157,-64.067 -84.236,-88.502c-57.484,-38.932 -123.612,-58.398 -198.384,-58.398c-68.587,0 -128.391,16.304 -179.41,48.911c-32.843,20.991 -58.493,48.971 -76.95,83.94l0,-112.612l-208.714,0l0,916.655l221.363,0l0,-538.018c0,-40.478 7.379,-75.264 22.136,-104.357c14.758,-29.093 35.488,-51.722 62.193,-67.885c26.704,-16.163 57.765,-24.245 93.183,-24.245c36.261,0 67.463,8.082 93.605,24.245c26.142,16.163 46.521,38.721 61.138,67.674c14.617,28.953 21.926,63.809 21.926,104.568l0,538.018l221.363,0l0,-538.018c0,-40.478 7.379,-75.264 22.136,-104.357c14.758,-29.093 35.559,-51.722 62.403,-67.885c26.845,-16.163 57.836,-24.245 92.973,-24.245c36.261,0 67.463,8.082 93.605,24.245c26.142,16.163 46.521,38.721 61.138,67.674c14.617,28.953 21.926,63.809 21.926,104.568l0,538.018l221.363,0l0,-590.724c0,-68.306 -14.828,-128.461 -44.483,-180.464c-29.656,-52.003 -70.063,-92.621 -121.223,-121.855c-51.16,-29.234 -109.206,-43.851 -174.139,-43.851c-73.366,0 -138.089,18.06 -194.167,54.181c-35.933,23.145 -66.182,54.051 -90.747,92.718Zm806.91,789.994l221.363,0l0,-916.655l-221.363,0l0,916.655Z" style="fill:#0b0b0f;"/></svg>

static/assets/js/theme-store.js

@@ -0,0 +1,5 @@
+(function () {
+    var t = localStorage.getItem('mifi-theme');
+    if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
+    else document.documentElement.removeAttribute('data-theme');
+})();

static/assets/tokens-bio.css

@@ -0,0 +1,131 @@
+/**
+ * mifi.bio variant – blue & rose palette (WCAG 2.2 AAA).
+ * Light by default; dark via prefers-color-scheme (auto) or [data-theme="dark"].
+ * Extra tuning tokens (--tune-*) for experimentation.
+ *
+ * Alternative palettes (AAA-compliant; replace the blocks below to try):
+ * - Green only: primary/secondary both green hues (e.g. 158 and 175).
+ * - Orange only: primary/secondary both warm hues (e.g. 28 and 24), neutrals hue 30.
+ */
+
+:root {
+    /* Neutrals – cool tint (blue) */
+    --color-bg: hsl(220 22% 98%);
+    --color-fg: hsl(220 20% 12%);
+    --color-surface: hsl(220 20% 100%);
+    --color-surface-elevated: hsl(220 18% 100%);
+    --color-border: hsl(220 16% 90%);
+    --color-border-subtle: hsl(220 14% 94%);
+
+    /* Primary – blue (≥7:1 on bg) */
+    --color-primary: hsl(220 65% 32%);
+    --color-primary-muted: hsl(220 50% 38%);
+    --color-secondary: hsl(330 55% 38%);
+    --color-secondary-muted: hsl(330 45% 42%);
+
+    --color-accent: hsl(220 65% 32%);
+    --color-focus-ring: hsl(220 65% 32%);
+    --color-link: hsl(220 65% 36%);
+    --color-link-hover: hsl(220 55% 26%);
+
+    /* Tuning */
+    --tune-primary-alt: hsl(220 55% 38%);
+    --tune-secondary-alt: hsl(330 50% 45%);
+    --tune-surface-2: hsl(220 20% 98%);
+    --tune-accent-alt: hsl(330 50% 48%);
+
+    /* Typography */
+    --font-wordmark: 'Plus Jakarta Sans', var(--font-sans);
+    --font-heading: Fraunces, var(--font-sans);
+    --font-body: Inter, var(--font-sans);
+    --font-heading-opsz: 36;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+        --color-bg: hsl(220 18% 8%);
+        --color-fg: hsl(220 14% 93%);
+        --color-surface: hsl(220 16% 11%);
+        --color-surface-elevated: hsl(220 14% 15%);
+        --color-border: hsl(220 14% 20%);
+        --color-border-subtle: hsl(220 12% 16%);
+        --color-primary: hsl(220 55% 62%);
+        --color-primary-muted: hsl(220 45% 55%);
+        --color-secondary: hsl(330 50% 65%);
+        --color-secondary-muted: hsl(330 42% 58%);
+        --color-accent: hsl(220 55% 62%);
+        --color-focus-ring: hsl(220 55% 62%);
+        --color-link: hsl(220 55% 66%);
+        --color-link-hover: hsl(220 50% 75%);
+        --tune-primary-alt: hsl(220 50% 58%);
+        --tune-secondary-alt: hsl(330 48% 62%);
+        --tune-surface-2: hsl(220 18% 9%);
+        --tune-accent-alt: hsl(330 48% 62%);
+    }
+}
+
+[data-theme='light'] {
+    --color-bg: hsl(220 22% 98%);
+    --color-fg: hsl(220 20% 12%);
+    --color-surface: hsl(220 20% 100%);
+    --color-surface-elevated: hsl(220 18% 100%);
+    --color-border: hsl(220 16% 90%);
+    --color-border-subtle: hsl(220 14% 94%);
+    --color-primary: hsl(220 65% 32%);
+    --color-primary-muted: hsl(220 50% 38%);
+    --color-secondary: hsl(330 55% 38%);
+    --color-secondary-muted: hsl(330 45% 42%);
+    --color-accent: hsl(220 65% 32%);
+    --color-focus-ring: hsl(220 65% 32%);
+    --color-link: hsl(220 65% 36%);
+    --color-link-hover: hsl(220 55% 26%);
+    --tune-primary-alt: hsl(220 55% 38%);
+    --tune-secondary-alt: hsl(330 50% 45%);
+    --tune-surface-2: hsl(220 20% 98%);
+    --tune-accent-alt: hsl(330 50% 48%);
+}
+
+[data-theme='dark'] {
+    --color-bg: hsl(220 18% 8%);
+    --color-fg: hsl(220 14% 93%);
+    --color-surface: hsl(220 16% 11%);
+    --color-surface-elevated: hsl(220 14% 15%);
+    --color-border: hsl(220 14% 20%);
+    --color-border-subtle: hsl(220 12% 16%);
+    --color-primary: hsl(220 55% 62%);
+    --color-primary-muted: hsl(220 45% 55%);
+    --color-secondary: hsl(330 50% 65%);
+    --color-secondary-muted: hsl(330 42% 58%);
+    --color-accent: hsl(220 55% 62%);
+    --color-focus-ring: hsl(220 55% 62%);
+    --color-link: hsl(220 55% 66%);
+    --color-link-hover: hsl(220 50% 75%);
+    --tune-primary-alt: hsl(220 50% 58%);
+    --tune-secondary-alt: hsl(330 48% 62%);
+    --tune-surface-2: hsl(220 18% 9%);
+    --tune-accent-alt: hsl(330 48% 62%);
+}
+
+/* -------------------------------------------------------------------------
+   ALTERNATIVE PALETTES (WCAG 2.2 AAA). Replace the :root and dark blocks
+   above with one of these if you prefer a single-hue scheme.
+   -------------------------------------------------------------------------
+
+   GREEN ONLY (no orange) – :root neutrals/primary/secondary:
+   --color-bg: hsl(158 22% 98%);
+   --color-fg: hsl(158 20% 12%);
+   --color-primary: hsl(158 64% 28%);
+   --color-primary-muted: hsl(158 45% 38%);
+   --color-secondary: hsl(175 55% 32%);
+   --color-secondary-muted: hsl(175 40% 40%);
+   (Dark: primary hsl(158 50% 58%); secondary hsl(175 45% 60%).)
+
+   ORANGE ONLY (no green) – :root neutrals/primary/secondary:
+   --color-bg: hsl(30 25% 98%);
+   --color-fg: hsl(30 20% 10%);
+   --color-primary: hsl(24 72% 38%);
+   --color-primary-muted: hsl(24 55% 45%);
+   --color-secondary: hsl(38 65% 35%);
+   --color-secondary-muted: hsl(38 50% 42%);
+   (Dark: primary hsl(24 60% 58%); secondary hsl(38 55% 62%).)
+*/

static/assets/tokens-dev.css

@@ -0,0 +1,99 @@
+/**
+ * mifi.dev variant – purple/slate palette.
+ * Light by default; dark via prefers-color-scheme (auto) or [data-theme="dark"].
+ * Extra tuning tokens (--tune-*) for experimentation.
+ */
+
+:root {
+    --color-bg: hsl(260 20% 98%);
+    --color-fg: hsl(260 15% 12%);
+    --color-surface: hsl(260 18% 100%);
+    --color-surface-elevated: hsl(260 15% 100%);
+    --color-border: hsl(260 12% 90%);
+    --color-border-subtle: hsl(260 10% 94%);
+    --color-primary: hsl(262 83% 38%);
+    --color-primary-muted: hsl(262 60% 52%);
+    --color-secondary: hsl(220 25% 35%);
+    --color-secondary-muted: hsl(220 20% 48%);
+    --color-accent: hsl(262 83% 38%);
+    --color-focus-ring: hsl(262 83% 38%);
+    --color-link: hsl(262 83% 38%);
+    --color-link-hover: hsl(262 70% 30%);
+
+    /* Tuning – adjust without changing structure */
+    --tune-primary-alt: hsl(262 70% 45%);
+    --tune-secondary-alt: hsl(220 30% 42%);
+    --tune-surface-2: hsl(260 12% 98%);
+    --tune-accent-alt: hsl(262 60% 50%);
+
+    /* Typography (shared; override in app if needed) */
+    --font-wordmark: 'Plus Jakarta Sans', var(--font-sans);
+    --font-heading: Fraunces, var(--font-sans);
+    --font-body: Inter, var(--font-sans);
+    --font-heading-opsz: 36; /* optical size for variable Fraunces; no effect on static instances */
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+        --color-bg: hsl(260 18% 8%);
+        --color-fg: hsl(260 12% 94%);
+        --color-surface: hsl(260 20% 12%);
+        --color-surface-elevated: hsl(260 18% 16%);
+        --color-border: hsl(260 15% 22%);
+        --color-border-subtle: hsl(260 12% 18%);
+        --color-primary: hsl(262 70% 65%);
+        --color-primary-muted: hsl(262 50% 58%);
+        --color-secondary: hsl(220 25% 68%);
+        --color-secondary-muted: hsl(220 20% 58%);
+        --color-accent: hsl(262 70% 65%);
+        --color-focus-ring: hsl(262 70% 65%);
+        --color-link: hsl(262 70% 70%);
+        --color-link-hover: hsl(262 65% 82%);
+        --tune-primary-alt: hsl(262 60% 60%);
+        --tune-secondary-alt: hsl(220 30% 65%);
+        --tune-surface-2: hsl(260 15% 11%);
+        --tune-accent-alt: hsl(262 55% 68%);
+    }
+}
+
+[data-theme='light'] {
+    --color-bg: hsl(260 20% 98%);
+    --color-fg: hsl(260 15% 12%);
+    --color-surface: hsl(260 18% 100%);
+    --color-surface-elevated: hsl(260 15% 100%);
+    --color-border: hsl(260 12% 90%);
+    --color-border-subtle: hsl(260 10% 94%);
+    --color-primary: hsl(262 83% 38%);
+    --color-primary-muted: hsl(262 60% 52%);
+    --color-secondary: hsl(220 25% 35%);
+    --color-secondary-muted: hsl(220 20% 48%);
+    --color-accent: hsl(262 83% 38%);
+    --color-focus-ring: hsl(262 83% 38%);
+    --color-link: hsl(262 83% 38%);
+    --color-link-hover: hsl(262 70% 30%);
+    --tune-primary-alt: hsl(262 70% 45%);
+    --tune-secondary-alt: hsl(220 30% 42%);
+    --tune-surface-2: hsl(260 12% 98%);
+    --tune-accent-alt: hsl(262 60% 50%);
+}
+
+[data-theme='dark'] {
+    --color-bg: hsl(260 18% 8%);
+    --color-fg: hsl(260 12% 94%);
+    --color-surface: hsl(260 20% 12%);
+    --color-surface-elevated: hsl(260 18% 16%);
+    --color-border: hsl(260 15% 22%);
+    --color-border-subtle: hsl(260 12% 18%);
+    --color-primary: hsl(262 70% 65%);
+    --color-primary-muted: hsl(262 50% 58%);
+    --color-secondary: hsl(220 25% 68%);
+    --color-secondary-muted: hsl(220 20% 58%);
+    --color-accent: hsl(262 70% 65%);
+    --color-focus-ring: hsl(262 70% 65%);
+    --color-link: hsl(262 70% 70%);
+    --color-link-hover: hsl(262 65% 82%);
+    --tune-primary-alt: hsl(262 60% 60%);
+    --tune-secondary-alt: hsl(220 30% 65%);
+    --tune-surface-2: hsl(260 15% 11%);
+    --tune-accent-alt: hsl(262 55% 68%);
+}