/* ── fonts.css ── */
/* Webfonts. Fira Code ships locally (copied from the codebase);
   Inter + Outfit load from Google Fonts (not vendored in the repo — flagged in readme). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');
@font-face{font-family:'Fira Code';src:url('/assets/fonts/FiraCode-VF.woff2') format('woff2-variations');font-weight:300 700;font-style:normal;font-display:swap}

/* ── colors.css ── */
/* Krystalize v7 "Blackline Ritual" — primitives from brand/palette.json (verbatim) */
:root{
--absolute-black:#030303;
--glass-base:#030303;
--ash-black:#242320;
--dust:#8a8378;
--bone-white:#f8f1e6;
--old-gold:#b78e33;
--pale-gold:#e5c878;
--vermilion:#e44728;
--success:#4ac388;
/* Light palette */
--light-bg:#f8f4ea;
--light-surface:#fffaf2;
--light-surface-2:#e5ded3;
--light-border:rgba(9,8,6,0.1);
--light-text:#090806;
--light-muted:#776c61;
--light-gold:#8a6e1a;
/* ── Semantic surface (--kr-*) — dark is primary ── */
--kr-background:var(--absolute-black);
--kr-card-bg:var(--ash-black);
--kr-secondary-bg:var(--ash-black);
--kr-foreground:var(--bone-white);
--kr-muted-foreground:var(--dust);
--kr-primary:var(--old-gold);
--kr-accent:var(--old-gold);
--kr-border:color-mix(in srgb,var(--bone-white) 8%,transparent);
--kr-accent-bg:var(--kr-card-bg);
--kr-popover-bg:color-mix(in srgb,var(--kr-background) 85%,transparent);
--kr-on-primary:var(--absolute-black);
--kr-destructive:var(--vermilion);
--kr-light-gold:var(--pale-gold);
--kr-input-bg:var(--kr-background);
--kr-text:var(--kr-foreground);
--kr-success:#4ac388;
--kr-warning:var(--old-gold);
--kr-info:var(--old-gold); /* NEVER blue */
}
/* Light theme scope — re-point the surface, nothing else */
[data-theme-version='light']{
--kr-background:var(--light-bg);
--kr-card-bg:var(--light-surface);
--kr-secondary-bg:var(--light-surface-2);
--kr-foreground:var(--light-text);
--kr-muted-foreground:var(--light-muted);
--kr-accent:var(--light-gold);
--kr-border:var(--light-border);
}

/* ── minerals.css ── */
/* Mineral Spectrum — earthy mineral hues promoted from the file-type graph palette
   (packages/gui krystalize.css, spec 26_05_21). Every hue is an earth pigment that
   reads on absolute black. No Material blues, no jewel greens, no neon. */
:root{
--mineral-slate-1:#3d5a6f;--mineral-slate-2:#557389;--mineral-slate-3:#85a1b5;--mineral-slate-4:#b5c5d2;
--mineral-moss-1:#4d5f3a;--mineral-moss-2:#6e8253;--mineral-moss-3:#8fa071;--mineral-moss-4:#b5c495;
--mineral-mustard-1:#a37d2a;--mineral-mustard-2:#bd9a47;--mineral-mustard-3:#d4b66e;
--mineral-sienna-1:#8b3f1f;--mineral-sienna-2:#a85f35;
--mineral-ember-1:#9c2f1a;--mineral-ember-2:#e44728;--mineral-ember-3:#ed7757;--mineral-ember-4:#f3a28d;
--mineral-antique-1:#a88040;--mineral-antique-2:#e5c878;--mineral-antique-3:#f0dca7;
--mineral-plum-1:#5c3548;--mineral-plum-2:#7e5266;--mineral-plum-3:#a77f92;
--mineral-patina-1:#3f5c50;--mineral-patina-2:#5c7c6c;--mineral-patina-3:#7e9989;
--mineral-stone-1:#5a5752;--mineral-stone-2:#76726a;
--mineral-dust:#7a7163;
/* File-type aliases (canonical names used by the knowledge graph) */
--filetype-doc-1:var(--mineral-slate-1);--filetype-doc-2:var(--mineral-slate-2);--filetype-doc-3:var(--mineral-slate-3);--filetype-doc-4:var(--mineral-slate-4);
--filetype-code-1:var(--mineral-moss-1);--filetype-code-2:var(--mineral-moss-2);--filetype-code-3:var(--mineral-moss-3);--filetype-code-4:var(--mineral-moss-4);
--filetype-pdf:#b78e33;
--filetype-sheet-1:var(--mineral-mustard-1);--filetype-sheet-2:var(--mineral-mustard-2);--filetype-sheet-3:var(--mineral-mustard-3);
--filetype-slide-1:var(--mineral-sienna-1);--filetype-slide-2:var(--mineral-sienna-2);
--filetype-image-1:var(--mineral-ember-1);--filetype-image-2:var(--mineral-ember-2);--filetype-image-3:var(--mineral-ember-3);--filetype-image-4:var(--mineral-ember-4);
--filetype-video-1:var(--mineral-antique-1);--filetype-video-2:var(--mineral-antique-2);--filetype-video-3:var(--mineral-antique-3);
--filetype-audio-1:var(--mineral-plum-1);--filetype-audio-2:var(--mineral-plum-2);--filetype-audio-3:var(--mineral-plum-3);
--filetype-data-1:var(--mineral-patina-1);--filetype-data-2:var(--mineral-patina-2);--filetype-data-3:var(--mineral-patina-3);
--filetype-archive-1:var(--mineral-stone-1);--filetype-archive-2:var(--mineral-stone-2);
--filetype-other:var(--mineral-dust);
}

/* ── typography.css ── */
/* Krystalize type — Outfit (display/wordmark), Inter (body), Fira Code (mono) */
:root{
--kr-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--kr-font-heading:'Outfit',sans-serif;
--kr-font-mono:'Fira Code',monospace;
--kr-font-wordmark:'Outfit',sans-serif;
/* Size ladder (base 12, app UI density). Steps above base ride --kr-widget-scale. */
--kr-font-2xs:8px;--kr-font-xs:10px;--kr-font-sm:11px;--kr-font-base:12px;
--kr-font-md:calc(13px * var(--kr-widget-scale,1));
--kr-font-lg:calc(14px * var(--kr-widget-scale,1));
--kr-font-xl:calc(16px * var(--kr-widget-scale,1));
--kr-font-2xl:calc(18px * var(--kr-widget-scale,1));
--kr-font-3xl:calc(20px * var(--kr-widget-scale,1));
--kr-font-4xl:calc(24px * var(--kr-widget-scale,1));
--kr-font-5xl:calc(28px * var(--kr-widget-scale,1));
--kr-font-6xl:calc(32px * var(--kr-widget-scale,1));
/* Display ladder (marketing / hero surfaces) */
--kr-display-sm:clamp(28px,3.2vw,40px); /* @kind font */
--kr-display-md:clamp(40px,5vw,64px); /* @kind font */
--kr-display-lg:clamp(56px,7.2vw,96px); /* @kind font */
--kr-tracking-wordmark:0.12em; /* @kind font */
--kr-tracking-label:0.1em; /* @kind font */
}

/* ── geometry.css ── */
/* Shape & elevation surface — radii, shadows, blur (Project Mom Phase 2 values, verbatim) */
:root{
--kr-radius-xs:3px;--kr-radius-sm:4px;--kr-radius-md:6px;--kr-radius-lg:8px;--kr-radius-xl:10px;
--kr-radius-2xl:12px;--kr-radius-3xl:16px;--kr-radius-4xl:20px;--kr-radius-full:9999px;--kr-radius-circle:50%;
--kr-shadow-none:none;
--kr-shadow-well:inset 0 1px 3px color-mix(in srgb,var(--kr-background) 40%,transparent);
--kr-shadow-hairline:0 0 0 1px color-mix(in srgb,var(--kr-background) 25%,transparent);
--kr-shadow-hairline-inset:inset 0 0 0 1px color-mix(in srgb,var(--kr-background) 25%,transparent);
--kr-shadow-ring:0 0 0 3px color-mix(in srgb,var(--kr-primary) 25%,transparent);
--kr-shadow-sm:0 2px 8px color-mix(in srgb,var(--kr-background) 30%,transparent);
--kr-shadow-md:0 8px 24px color-mix(in srgb,var(--kr-background) 40%,transparent);
--kr-shadow-lg:0 16px 48px color-mix(in srgb,var(--kr-background) 50%,transparent);
--kr-shadow-xl:0 24px 64px color-mix(in srgb,var(--kr-background) 60%,transparent);
--kr-shadow-lift:0 4px 16px color-mix(in srgb,var(--kr-primary) 25%,transparent);
--kr-shadow-lift-hover:0 4px 16px color-mix(in srgb,var(--kr-primary) 40%,transparent);
--kr-blur-none:none; /* @kind other */--kr-blur-xs:blur(3px); /* @kind other */--kr-blur-sm:blur(4px); /* @kind other */--kr-blur-md:blur(8px); /* @kind other */--kr-blur-lg:blur(12px); /* @kind other */
--kr-glass-sm:blur(16px) saturate(1.1); /* @kind other */--kr-glass-md:blur(20px) saturate(1.2); /* @kind other */--kr-glass-lg:blur(24px) saturate(1.3); /* @kind other */--kr-glass-xl:blur(32px) saturate(1.4); /* @kind other */
/* Spacing — 4px base grid observed across GUI paddings (4/8/12/16/20/24/32/48) */
--kr-space-1:4px;--kr-space-2:8px;--kr-space-3:12px;--kr-space-4:16px;--kr-space-5:20px;--kr-space-6:24px;--kr-space-8:32px;--kr-space-12:48px;--kr-space-16:64px;
}

/* ── organics.css ── */
/* ═══ ORGANICS — the Geode layer (new in this system, user-mandated) ═══
   v7 stays the law: absolute black, gold→vermilion, bone. Organics add light
   BEHAVIOR — refraction, facets, caustics, grain — never new hues beyond the
   mineral spectrum. Use sparingly: one living surface per view. */
:root{
/* Facet gradients — conic cut-gem fills. Use as backgrounds on hero panels,
   gem chips, progress fills. */
--facet-gold:conic-gradient(from 210deg at 50% 42%,#8a6a24 0deg,#e5c878 52deg,#b78e33 96deg,#f8f1e6 118deg,#b78e33 150deg,#8a6a24 204deg,#e5c878 260deg,#a37d2a 318deg,#8a6a24 360deg); /* @kind other */
--facet-ember:conic-gradient(from 190deg at 50% 40%,#7a2413 0deg,#ed7757 58deg,#e44728 110deg,#f3a28d 132deg,#9c2f1a 178deg,#e44728 240deg,#8b3f1f 300deg,#7a2413 360deg); /* @kind other */
--facet-plum:conic-gradient(from 200deg at 50% 44%,#3d2230 0deg,#a77f92 60deg,#5c3548 116deg,#c9a2b4 138deg,#5c3548 190deg,#7e5266 258deg,#3d2230 360deg); /* @kind other */
--facet-patina:conic-gradient(from 220deg at 50% 42%,#2a4038 0deg,#7e9989 55deg,#3f5c50 105deg,#a8c0b2 128deg,#3f5c50 175deg,#5c7c6c 250deg,#2a4038 360deg); /* @kind other */
--facet-slate:conic-gradient(from 205deg at 50% 42%,#263b4b 0deg,#85a1b5 58deg,#3d5a6f 112deg,#b5c5d2 134deg,#3d5a6f 182deg,#557389 252deg,#263b4b 360deg); /* @kind other */
/* Prism line — the brand light-refraction hairline (dividers, underlines, progress) */
--prism-line:linear-gradient(90deg,transparent,#b78e33 18%,#e5c878 38%,#f8f1e6 50%,#e5c878 62%,#e44728 84%,transparent); /* @kind other */
--prism-line-still:linear-gradient(90deg,#b78e33,#e5c878 35%,#f8f1e6 50%,#e5c878 65%,#e44728); /* @kind other */
/* Brand fill gradients (from v7 reference) */
--gradient-brand:linear-gradient(135deg,var(--old-gold),var(--vermilion)); /* @kind other */
--gradient-gold-text:linear-gradient(135deg,var(--old-gold),var(--pale-gold),var(--old-gold)); /* @kind other */
/* Caustic glows — light pooled under/behind crystal objects */
--glow-gold:radial-gradient(closest-side,rgba(183,142,51,0.32),rgba(183,142,51,0.08) 55%,transparent); /* @kind other */
--glow-ember:radial-gradient(closest-side,rgba(228,71,40,0.26),rgba(228,71,40,0.06) 55%,transparent); /* @kind other */
--glow-bone:radial-gradient(closest-side,rgba(248,241,230,0.12),transparent 70%); /* @kind other */
/* Glass recipes (v7 verbatim: lift = bone overlay, not warmer base) */
--glass-overlay:linear-gradient(180deg,rgba(248,241,230,0.025),rgba(248,241,230,0.008)); /* @kind other */
--glass-card-bg:linear-gradient(180deg,rgba(248,241,230,0.025),rgba(248,241,230,0.008)),var(--absolute-black); /* @kind other */
--glass-border:1px solid rgba(248,241,230,0.1); /* @kind other */
--glass-shadow:0 14px 36px rgba(0,0,0,0.42); /* @kind other */
/* Grain — organic film over flat fills (SVG turbulence, tile ~140px, use with opacity .05-.12) */
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); /* @kind other */
/* Motion — crystal physics: slow grows, floaty drifts, no bounces */
--ease-crystal:cubic-bezier(0.22,1,0.36,1); /* @kind other */
--ease-refract:cubic-bezier(0.65,0,0.35,1); /* @kind other */
--dur-glint:600ms; /* @kind other */
--dur-grow:1200ms; /* @kind other */
--dur-drift:9s; /* @kind other */
--dur-sweep:2.5s; /* @kind other */
}
/* Shared organic keyframes */
@keyframes kr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes kr-pulse-glow{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:0.8;transform:scale(1.12)}}
@keyframes kr-slide{0%{transform:translateX(-100%)}50%{transform:translateX(250%)}100%{transform:translateX(-100%)}}
@keyframes kr-sheen{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes kr-drift{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(8px,-10px) rotate(2deg)}66%{transform:translate(-6px,6px) rotate(-2deg)}}

/* ── base.css ── */
/* Base element styles */
*,*::before,*::after{box-sizing:border-box}
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--kr-font-body)}
body{background:var(--kr-background);color:var(--kr-foreground);margin:0;font-size:14px;line-height:1.5}
ul,ol{list-style:none;padding-left:0;margin-bottom:0}
a{color:var(--kr-accent);text-decoration:none}
a:hover{color:var(--pale-gold)}
::selection{background:rgba(183,142,51,0.35);color:var(--bone-white)}
code,pre,kbd{font-family:var(--kr-font-mono)}
h1,h2,h3,h4{font-family:var(--kr-font-heading);font-weight:600;margin:0}