/** * Family Office App Kit — design tokens (hue-tinted per surface). * * Dress any Father Framework App Console by setting on : * style="--hue:248" → full color suite from one hue * data-fo-console="briefcase" → fo-dress.js resolves suite + fonts * data-fo-font="sf|rounded|mono" → font stack family * data-fo-density="comfortable|compact|cozy" * data-theme="dark|light" → theme axis (Plan 0528; independent of hue) * data-mood="gradient|orb" → visual mood (independent of theme) * * Source of named consoles: color-suite.json · fo-dress.js applies at runtime. * Law: FO tokens only on Type B consoles — never invent parallel --bc-* ramps. */ :root, .fo-kit { /* ── Color axis ─────────────────────────────────────────── */ --hue: 210; /* Surfaces (hue-tinted) */ --fo-bg: hsl(var(--hue) 22% 5%); --fo-panel: hsl(var(--hue) 16% 9%); --fo-panel-2: hsl(var(--hue) 14% 12%); --fo-panel-3: hsl(var(--hue) 12% 16%); --fo-elevated: color-mix(in srgb, var(--fo-panel-2) 88%, white 4%); /* Ink hierarchy */ --fo-fg: #f4f4f5; --fo-fg-2: #a1a1aa; --fo-fg-3: #71717a; --fo-fg-inverse: #0a0a0c; /* Aliases used by older console CSS */ --fo-text: var(--fo-fg); --fo-dim: var(--fo-fg-2); --fo-muted: var(--fo-fg-3); --fo-line: var(--fo-border); --fo-border: rgba(255, 255, 255, 0.08); --fo-border-strong: rgba(255, 255, 255, 0.14); /* Accent ramp from --hue (Suite login DNA) */ --fo-accent: hsl(var(--hue) 72% 62%); --fo-accent-2: hsl(var(--hue) 68% 58%); --fo-accent-soft: color-mix(in srgb, var(--fo-accent) 18%, transparent); --fo-accent-strong: hsl(var(--hue) 72% 48%); --fo-accent-ink: hsl(var(--hue) 40% 12%); /* Full color suite — one hue dresses the Framework App Console */ --fo-suite-mark: linear-gradient( 145deg, hsl(var(--hue) 58% 48%) 0%, hsl(calc(var(--hue) + 14) 52% 32%) 100% ); --fo-suite-login: linear-gradient( 165deg, hsl(var(--hue) 48% 18%) 0%, hsl(var(--hue) 42% 10%) 45%, hsl(var(--hue) 38% 7%) 100% ); --fo-suite-glow: radial-gradient( 70% 50% at 18% 0%, hsl(var(--hue) 70% 52% / 0.22), transparent 60% ); --fo-suite-glow-2: radial-gradient( 55% 40% at 88% 12%, hsl(calc(var(--hue) + 28) 65% 48% / 0.14), transparent 65% ); --fo-suite-wash: linear-gradient( 160deg, hsl(var(--hue) 50% 14% / 0.45), transparent 55% ); --fo-suite-ring: color-mix(in srgb, var(--fo-accent) 45%, transparent); --fo-suite-chip: color-mix(in srgb, var(--fo-accent) 12%, var(--fo-panel)); /* Semantic status (stable across hues) */ --fo-ok: #34d399; --fo-warn: #fbbf24; --fo-danger: #f87171; --fo-info: #60a5fa; /* ── Typography ─────────────────────────────────────────── */ --fo-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; --fo-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --fo-font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Monaco, monospace; --fo-font-rounded: "SF Pro Rounded", -apple-system, system-ui, sans-serif; /* Active body stack (fo-dress may swap) */ --fo-font: var(--fo-font-display); --fo-text-xs: 0.6875rem; /* 11 */ --fo-text-sm: 0.8125rem; /* 13 */ --fo-text-md: 0.875rem; /* 14 */ --fo-text-base: 0.9375rem; /* 15 */ --fo-text-lg: 1.0625rem; /* 17 */ --fo-text-xl: 1.25rem; /* 20 */ --fo-text-2xl: 1.5rem; /* 24 */ --fo-text-3xl: 1.875rem; /* 30 */ --fo-text-hero: clamp(1.35rem, 2.8vw, 1.75rem); --fo-leading-tight: 1.2; --fo-leading: 1.45; --fo-leading-loose: 1.6; --fo-tracking-tight: -0.02em; --fo-tracking-wide: 0.06em; --fo-weight-normal: 400; --fo-weight-medium: 550; --fo-weight-semibold: 650; --fo-weight-bold: 750; /* Density scale (1 = comfortable; fo-dress multiplies) */ --fo-density: 1; --fo-type-scale: 1; /* ── Space & shape ──────────────────────────────────────── */ --fo-space-1: calc(4px * var(--fo-density)); --fo-space-2: calc(8px * var(--fo-density)); --fo-space-3: calc(12px * var(--fo-density)); --fo-space-4: calc(16px * var(--fo-density)); --fo-space-5: calc(20px * var(--fo-density)); --fo-space-6: calc(24px * var(--fo-density)); --fo-space-8: calc(32px * var(--fo-density)); --fo-space-10: calc(40px * var(--fo-density)); --fo-space-12: calc(48px * var(--fo-density)); --fo-radius-sm: 8px; --fo-radius: 12px; --fo-radius-md: 14px; --fo-radius-lg: 16px; --fo-radius-xl: 22px; --fo-radius-pill: 999px; --fo-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25); --fo-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35); --fo-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45); --fo-shadow-glow: 0 0 40px hsl(var(--hue) 70% 50% / 0.22); /* Cotton-ball / Comet motion (RL-COTTON-001) — motion.css is source of full stack; tokens here so surfaces that skip motion.css still share the curve family. */ --comet-duration-fast: 0.15s; --comet-duration-mid: 0.32s; --comet-duration-slide: 0.32s; --comet-ease-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); --comet-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --comet-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --fo-breathe-ease: var(--comet-ease-out); --fo-breathe-settle: var(--comet-ease-back); --fo-breathe-duration: 0.55s; --fo-breathe-duration-fast: 0.42s; --comet: var(--comet-ease-back); /* Mood selector — set on */ --fo-mood: gradient; /* Overlay-titlebar inset — 0 in browsers; Tauri + Swift overlay shells reserve the macOS traffic-light strip so chrome can bleed under the titlebar (same Father look as web/Tauri). Every fixed top-anchored rail offsets by this. */ --fo-titlebar-inset: 0px; color-scheme: dark; font-family: var(--fo-font); } /* Apply body baseline when fo-kit owns the document */ html.fo-kit body { font-family: var(--fo-font-text, var(--fo-font)); font-size: calc(var(--fo-text-md) * var(--fo-type-scale)); line-height: var(--fo-leading); color: var(--fo-fg); background: var(--fo-bg); -webkit-font-smoothing: antialiased; } html.fo-kit h1, html.fo-kit h2, html.fo-kit h3, html.fo-kit .fo-display { font-family: var(--fo-font-display, var(--fo-font)); letter-spacing: var(--fo-tracking-tight); font-weight: var(--fo-weight-bold); } html.fo-kit code, html.fo-kit kbd, html.fo-kit pre, html.fo-kit .fo-mono { font-family: var(--fo-font-mono); } /* Overlay native shells — Tauri (Fusion) and Swift thin shells share the same inset. */ [data-surface="tauri"], .fo-kit[data-surface="tauri"], [data-surface="swift"], .fo-kit[data-surface="swift"] { --fo-titlebar-inset: 34px; } /* Font family axis — data-fo-font on (fo-dress sets this) */ .fo-kit[data-fo-font="rounded"] { --fo-font: var(--fo-font-rounded); --fo-font-display: var(--fo-font-rounded); --fo-font-text: var(--fo-font-rounded); } .fo-kit[data-fo-font="mono"] { --fo-font: var(--fo-font-mono); --fo-font-display: var(--fo-font-mono); } .fo-kit[data-fo-font="sf"], .fo-kit:not([data-fo-font]) { /* default SF stacks already set */ } /* Density axis */ .fo-kit[data-fo-density="compact"] { --fo-density: 0.88; --fo-type-scale: 0.94; } .fo-kit[data-fo-density="cozy"] { --fo-density: 1.08; --fo-type-scale: 1.04; } .fo-kit[data-fo-density="comfortable"], .fo-kit:not([data-fo-density]) { --fo-density: 1; --fo-type-scale: 1; } /* Theme axis (Plan 0528 — Automata orthogonality, fusion audit Grade A). Dark = the base tokens above. Light overrides below — independent of --hue and data-mood, so any console flips themes without touching its own CSS. fo-theme.js drives: data-theme pinned = explicit; no attribute = auto (the media query applies the same light set when the OS is light). */ [data-theme="light"], .fo-kit[data-theme="light"] { --fo-bg: hsl(var(--hue) 35% 95%); --fo-panel: hsl(var(--hue) 30% 99%); --fo-panel-2: hsl(var(--hue) 24% 91%); --fo-panel-3: hsl(var(--hue) 22% 86%); --fo-elevated: #ffffff; --fo-fg: #1b1c22; --fo-fg-2: #4b4d58; --fo-fg-3: #83858f; --fo-fg-inverse: #f4f4f5; --fo-border: rgba(15, 20, 45, 0.13); --fo-border-strong: rgba(15, 20, 45, 0.22); --fo-accent: hsl(var(--hue) 68% 44%); --fo-accent-2: hsl(var(--hue) 62% 38%); --fo-accent-soft: color-mix(in srgb, var(--fo-accent) 14%, transparent); --fo-accent-strong: hsl(var(--hue) 68% 36%); --fo-accent-ink: #ffffff; --fo-suite-mark: linear-gradient( 145deg, hsl(var(--hue) 62% 48%) 0%, hsl(calc(var(--hue) + 14) 55% 36%) 100% ); --fo-suite-login: linear-gradient( 165deg, hsl(var(--hue) 40% 96%) 0%, hsl(var(--hue) 35% 92%) 100% ); --fo-suite-glow: radial-gradient( 70% 50% at 18% 0%, hsl(var(--hue) 70% 52% / 0.16), transparent 60% ); --fo-shadow-sm: 0 2px 8px rgba(15, 20, 45, 0.08); --fo-shadow-md: 0 8px 28px rgba(15, 20, 45, 0.12); --fo-shadow-lg: 0 20px 48px rgba(15, 20, 45, 0.16); color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme]), .fo-kit:not([data-theme]) { --fo-bg: hsl(var(--hue) 35% 95%); --fo-panel: hsl(var(--hue) 30% 99%); --fo-panel-2: hsl(var(--hue) 24% 91%); --fo-panel-3: hsl(var(--hue) 22% 86%); --fo-elevated: #ffffff; --fo-fg: #1b1c22; --fo-fg-2: #4b4d58; --fo-fg-3: #83858f; --fo-fg-inverse: #f4f4f5; --fo-border: rgba(15, 20, 45, 0.13); --fo-border-strong: rgba(15, 20, 45, 0.22); --fo-accent: hsl(var(--hue) 68% 44%); --fo-accent-2: hsl(var(--hue) 62% 38%); --fo-accent-soft: color-mix(in srgb, var(--fo-accent) 14%, transparent); --fo-accent-strong: hsl(var(--hue) 68% 36%); --fo-accent-ink: #ffffff; color-scheme: light; } } /* Mood A — vivid gradient-pop (default; --hue-driven, family-signin pattern) */ [data-mood="gradient"], .fo-kit:not([data-mood]), .fo-kit[data-mood="gradient"] { --fo-mood: gradient; --fo-bg-glow: var(--fo-suite-glow), var(--fo-suite-glow-2); } /* Mood B — spacey Orb-minimal (orb-design-system.md §2) */ [data-mood="orb"], .fo-kit[data-mood="orb"] { --fo-mood: orb; --fo-bg: #030308; --fo-panel: rgba(6, 8, 16, 0.82); --fo-panel-2: rgba(8, 10, 18, 0.88); --fo-panel-3: rgba(12, 14, 24, 0.92); --fo-fg: rgba(220, 228, 245, 0.88); --fo-fg-2: rgba(200, 214, 245, 0.55); --fo-fg-3: rgba(160, 180, 220, 0.45); --fo-border: rgba(255, 255, 255, 0.08); --fo-accent: rgb(130, 170, 255); --fo-accent-2: rgb(110, 150, 235); --fo-bg-glow: radial-gradient( ellipse 80% 60% at 50% 45%, rgba(28, 38, 72, 0.35), transparent 70% ); } /* Utility classes for dressing Framework App Console UI without custom CSS */ .fo-kit .fo-suite-mark { background: var(--fo-suite-mark); color: var(--fo-accent-ink, #fff); } .fo-kit .fo-suite-surface { background: var(--fo-panel); border: 1px solid var(--fo-border); border-radius: var(--fo-radius-lg); box-shadow: var(--fo-shadow-sm); } .fo-kit .fo-suite-chip { background: var(--fo-suite-chip); border: 1px solid var(--fo-suite-ring); color: var(--fo-fg); border-radius: var(--fo-radius-pill); font-size: var(--fo-text-sm); font-weight: var(--fo-weight-semibold); padding: var(--fo-space-1) var(--fo-space-3); } .fo-kit .fo-suite-accent-text { color: var(--fo-accent); } .fo-kit .fo-suite-border { border-color: var(--fo-suite-ring); }