@charset "UTF-8"; /* * =========================================================================== * WARNING: AUTO-GENERATED FILE. DO NOT MODIFY DIRECTLY. * =========================================================================== * Generated by Formic CLI on 2026-04-07T21:56:09Z. * * Any manual changes made to this file will be lost the next time * the CLI is run. To make changes, edit your brand configuration * and regenerate using: * * formic export --output * * Theme switching: * - Light theme is applied by default. * - Dark theme activates via system preference * (@media prefers-color-scheme: dark). * - Manual override: add [data-theme="light"] or * [data-theme="dark"] to any ancestor element (typically ). * - Manual override takes priority over system preference. * =========================================================================== */ :root { /* ---- Colors ---- */ /* Background — Elevation */ --sl-color-bg-base: #ffffff; --sl-color-bg-subtle: #f7f7f7; --sl-color-bg-default: #ffffff; --sl-color-bg-raised: #e0e0e0; --sl-color-bg-overlay: #ffffff; --sl-color-bg-scrim: rgba(0, 0, 0, 0.5); /* Background — Accent */ --sl-color-bg-accent: #32954b; --sl-color-bg-accent-subtle: #f5faf6; --sl-color-bg-accent-hover: #28773c; --sl-color-bg-accent-active: #1e592d; --sl-color-bg-accent-selected: #32954b; /* Background — Neutral */ --sl-color-bg-neutral: #f0f0f0; --sl-color-bg-neutral-subtle: #f7f7f7; --sl-color-bg-neutral-hover: #e0e0e0; --sl-color-bg-neutral-active: #c1c1c1; /* Background — Semantic */ --sl-color-bg-info: #6ea5f0; --sl-color-bg-info-subtle: #f8fbfe; --sl-color-bg-success: #32954b; --sl-color-bg-success-subtle: #f5faf6; --sl-color-bg-warning: #ebd246; --sl-color-bg-warning-subtle: #fefdf6; --sl-color-bg-danger: #d84646; --sl-color-bg-danger-subtle: #fdf6f6; --sl-color-bg-danger-hover: #ad3838; --sl-color-bg-danger-active: #822a2a; --sl-color-bg-disabled: #f0f0f0; /* Text */ --sl-color-text-primary: #505050; --sl-color-text-secondary: #838383; --sl-color-text-tertiary: #a2a2a2; --sl-color-text-disabled: #a2a2a2; --sl-color-text-on-accent: #ffffff; --sl-color-text-accent: #32954b; --sl-color-text-accent-hover: #28773c; --sl-color-text-info: #6ea5f0; --sl-color-text-success: #32954b; --sl-color-text-warning: #ebd246; --sl-color-text-danger: #d84646; --sl-color-text-heading: #3c3c3c; /* Border */ --sl-color-border-default: #e0e0e0; --sl-color-border-subtle: #f0f0f0; --sl-color-border-strong: #a2a2a2; --sl-color-border-focus: #32954b; --sl-color-border-disabled: #e0e0e0; --sl-color-border-accent: #32954b; --sl-color-border-info: #e2edfc; --sl-color-border-success: #d6eadb; --sl-color-border-warning: #fbf6da; --sl-color-border-danger: #f7dada; /* Icon */ --sl-color-icon-default: #505050; --sl-color-icon-subtle: #838383; --sl-color-icon-disabled: #a2a2a2; --sl-color-icon-on-accent: #ffffff; --sl-color-icon-accent: #32954b; --sl-color-icon-info: #6ea5f0; --sl-color-icon-success: #32954b; --sl-color-icon-warning: #ebd246; --sl-color-icon-danger: #d84646; /* Transparent */ --sl-color-transparent: rgba(0, 0, 0, 0); /* ---- Edge: Radius ---- */ --sl-radius-none: 0rem; --sl-radius-indicator: 0.0625rem; --sl-radius-control: 0.125rem; --sl-radius-container: 0.25rem; --sl-radius-surface: 0.5rem; --sl-radius-full: 1152921500000000000rem; /* ---- Edge: Border Width ---- */ --sl-border-none: 0rem; --sl-border-separator: 0.0625rem; --sl-border-control: 0.0625rem; --sl-border-accent: 0.125rem; --sl-border-heavy: 0.25rem; /* ---- Edge: Focus Outline ---- */ --sl-focus-outline-width: 0.125rem; --sl-focus-outline-style: solid; --sl-focus-outline-offset: 2px; /* ---- Spacing (Mobile Base) ---- */ --sl-space-layout-margin: 2rem; --sl-space-layout-gap: 4rem; --sl-space-container-padding-lg: 3rem; --sl-space-container-padding-md: 1rem; --sl-space-container-padding-sm: 0.5rem; --sl-space-container-gap: 2rem; --sl-space-component-padding-lg: 3rem; --sl-space-component-padding-md: 1rem; --sl-space-component-padding-sm: 0.25rem; --sl-space-component-gap: 0.25rem; --sl-space-stack-gap-lg: 3rem; --sl-space-stack-gap-md: 1rem; --sl-space-stack-gap-sm: 0.5rem; /* ---- Size (Mobile Base) ---- */ /* Icon */ --sl-size-icon-xs: 0.75rem; --sl-size-icon-sm: 1rem; --sl-size-icon-md: 1.25rem; --sl-size-icon-lg: 1.5rem; --sl-size-icon-xl: 1.75rem; --sl-size-icon-display: 2.5rem; /* Avatar */ --sl-size-avatar-xs: 1.25rem; --sl-size-avatar-sm: 1.5rem; --sl-size-avatar-md: 1.75rem; --sl-size-avatar-lg: 2rem; --sl-size-avatar-xl: 2.5rem; --sl-size-avatar-2xl: 3.5rem; /* Thumbnail */ --sl-size-thumb-sm: 7.5rem; --sl-size-thumb-md: 11.5rem; --sl-size-thumb-lg: 17rem; --sl-size-thumb-xl: 25.5rem; /* Interactive Controls */ --sl-size-control-sm: 0.75rem; --sl-size-control-md: 1rem; --sl-size-control-lg: 1.25rem; /* ---- Typography: Font Family ---- */ --sl-font-family-body: "Hanken Grotesk", Inter, Arial, sans-serif; --sl-font-family-heading: "Hanken Grotesk", Inter, Arial, sans-serif; /* ---- Typography: Scale (Mobile Base) ---- */ /* Font Size */ --sl-font-size-display: 5.25rem; --sl-font-size-h1: 4.25rem; --sl-font-size-h2: 3.5rem; --sl-font-size-h3: 3rem; --sl-font-size-h4: 2.5rem; --sl-font-size-h5: 2rem; --sl-font-size-h6: 1.75rem; --sl-font-size-body-lg: 1.5rem; --sl-font-size-body-md: 1.25rem; --sl-font-size-body-sm: 1rem; --sl-font-size-caption: 0.75rem; --sl-font-size-label: 0.75rem; /* Line Height */ --sl-line-height-display: 1.25; --sl-line-height-h1: 1.25; --sl-line-height-h2: 1.25; --sl-line-height-h3: 1.25; --sl-line-height-h4: 1.25; --sl-line-height-h5: 1.25; --sl-line-height-h6: 1.25; --sl-line-height-body-lg: 1.25; --sl-line-height-body-md: 1.25; --sl-line-height-body-sm: 1.25; --sl-line-height-caption: 1.25; --sl-line-height-label: 1.25; /* Font Weight */ --sl-font-weight-regular: 400; --sl-font-weight-medium: 500; --sl-font-weight-semibold: 600; --sl-font-weight-bold: 700; /* Letter Spacing */ --sl-letter-spacing-tight: -0.05; --sl-letter-spacing-normal: 0; --sl-letter-spacing-wide: 0.05; --sl-letter-spacing-wider: 0.1; } /* System dark mode — activated by OS/browser preference */ @media (prefers-color-scheme: dark) { :root { /* Background — Elevation */ --sl-color-bg-base: #141414; --sl-color-bg-subtle: #282828; --sl-color-bg-default: #3c3c3c; --sl-color-bg-raised: #505050; --sl-color-bg-overlay: #505050; --sl-color-bg-scrim: rgba(0, 0, 0, 0.6); /* Background — Accent */ --sl-color-bg-accent: #5baa6f; --sl-color-bg-accent-subtle: #0a1e0f; --sl-color-bg-accent-hover: #add5b7; --sl-color-bg-accent-active: #84bf93; --sl-color-bg-accent-selected: #5baa6f; /* Background — Neutral */ --sl-color-bg-neutral: #3c3c3c; --sl-color-bg-neutral-subtle: #282828; --sl-color-bg-neutral-hover: #505050; --sl-color-bg-neutral-active: #3c3c3c; /* Background — Semantic */ --sl-color-bg-info: #6ea5f0; --sl-color-bg-info-subtle: #162130; --sl-color-bg-success: #32954b; --sl-color-bg-success-subtle: #0a1e0f; --sl-color-bg-warning: #ebd246; --sl-color-bg-warning-subtle: #2f2a0e; --sl-color-bg-danger: #d84646; --sl-color-bg-danger-subtle: #2b0e0e; --sl-color-bg-danger-hover: #e89090; --sl-color-bg-danger-active: #e06b6b; --sl-color-bg-disabled: #505050; /* Text */ --sl-color-text-primary: #f0f0f0; --sl-color-text-secondary: #a2a2a2; --sl-color-text-tertiary: #838383; --sl-color-text-disabled: #646464; --sl-color-text-on-accent: #ffffff; --sl-color-text-accent: #84bf93; --sl-color-text-accent-hover: #add5b7; --sl-color-text-info: #a8c9f6; --sl-color-text-success: #84bf93; --sl-color-text-warning: #f3e490; --sl-color-text-danger: #e89090; --sl-color-text-heading: #f7f7f7; /* Border */ --sl-color-border-default: #505050; --sl-color-border-subtle: #3c3c3c; --sl-color-border-strong: #838383; --sl-color-border-focus: #84bf93; --sl-color-border-disabled: #646464; --sl-color-border-accent: #5baa6f; --sl-color-border-info: #5884c0; --sl-color-border-success: #28773c; --sl-color-border-warning: #bca838; --sl-color-border-danger: #ad3838; /* Icon */ --sl-color-icon-default: #f0f0f0; --sl-color-icon-subtle: #a2a2a2; --sl-color-icon-disabled: #646464; --sl-color-icon-on-accent: #ffffff; --sl-color-icon-accent: #84bf93; --sl-color-icon-info: #a8c9f6; --sl-color-icon-success: #84bf93; --sl-color-icon-warning: #f3e490; --sl-color-icon-danger: #e89090; /* Transparent */ --sl-color-transparent: rgba(0, 0, 0, 0); } } /* Manual override — [data-theme="light"] on any ancestor */ [data-theme=light] { /* Background — Elevation */ --sl-color-bg-base: #ffffff; --sl-color-bg-subtle: #f7f7f7; --sl-color-bg-default: #ffffff; --sl-color-bg-raised: #e0e0e0; --sl-color-bg-overlay: #ffffff; --sl-color-bg-scrim: rgba(0, 0, 0, 0.5); /* Background — Accent */ --sl-color-bg-accent: #32954b; --sl-color-bg-accent-subtle: #f5faf6; --sl-color-bg-accent-hover: #28773c; --sl-color-bg-accent-active: #1e592d; --sl-color-bg-accent-selected: #32954b; /* Background — Neutral */ --sl-color-bg-neutral: #f0f0f0; --sl-color-bg-neutral-subtle: #f7f7f7; --sl-color-bg-neutral-hover: #e0e0e0; --sl-color-bg-neutral-active: #c1c1c1; /* Background — Semantic */ --sl-color-bg-info: #6ea5f0; --sl-color-bg-info-subtle: #f8fbfe; --sl-color-bg-success: #32954b; --sl-color-bg-success-subtle: #f5faf6; --sl-color-bg-warning: #ebd246; --sl-color-bg-warning-subtle: #fefdf6; --sl-color-bg-danger: #d84646; --sl-color-bg-danger-subtle: #fdf6f6; --sl-color-bg-danger-hover: #ad3838; --sl-color-bg-danger-active: #822a2a; --sl-color-bg-disabled: #f0f0f0; /* Text */ --sl-color-text-primary: #505050; --sl-color-text-secondary: #838383; --sl-color-text-tertiary: #a2a2a2; --sl-color-text-disabled: #a2a2a2; --sl-color-text-on-accent: #ffffff; --sl-color-text-accent: #32954b; --sl-color-text-accent-hover: #28773c; --sl-color-text-info: #6ea5f0; --sl-color-text-success: #32954b; --sl-color-text-warning: #ebd246; --sl-color-text-danger: #d84646; --sl-color-text-heading: #3c3c3c; /* Border */ --sl-color-border-default: #e0e0e0; --sl-color-border-subtle: #f0f0f0; --sl-color-border-strong: #a2a2a2; --sl-color-border-focus: #32954b; --sl-color-border-disabled: #e0e0e0; --sl-color-border-accent: #32954b; --sl-color-border-info: #e2edfc; --sl-color-border-success: #d6eadb; --sl-color-border-warning: #fbf6da; --sl-color-border-danger: #f7dada; /* Icon */ --sl-color-icon-default: #505050; --sl-color-icon-subtle: #838383; --sl-color-icon-disabled: #a2a2a2; --sl-color-icon-on-accent: #ffffff; --sl-color-icon-accent: #32954b; --sl-color-icon-info: #6ea5f0; --sl-color-icon-success: #32954b; --sl-color-icon-warning: #ebd246; --sl-color-icon-danger: #d84646; /* Transparent */ --sl-color-transparent: rgba(0, 0, 0, 0); } /* Manual override — [data-theme="dark"] on any ancestor */ [data-theme=dark] { /* Background — Elevation */ --sl-color-bg-base: #141414; --sl-color-bg-subtle: #282828; --sl-color-bg-default: #3c3c3c; --sl-color-bg-raised: #505050; --sl-color-bg-overlay: #505050; --sl-color-bg-scrim: rgba(0, 0, 0, 0.6); /* Background — Accent */ --sl-color-bg-accent: #5baa6f; --sl-color-bg-accent-subtle: #0a1e0f; --sl-color-bg-accent-hover: #add5b7; --sl-color-bg-accent-active: #84bf93; --sl-color-bg-accent-selected: #5baa6f; /* Background — Neutral */ --sl-color-bg-neutral: #3c3c3c; --sl-color-bg-neutral-subtle: #282828; --sl-color-bg-neutral-hover: #505050; --sl-color-bg-neutral-active: #3c3c3c; /* Background — Semantic */ --sl-color-bg-info: #6ea5f0; --sl-color-bg-info-subtle: #162130; --sl-color-bg-success: #32954b; --sl-color-bg-success-subtle: #0a1e0f; --sl-color-bg-warning: #ebd246; --sl-color-bg-warning-subtle: #2f2a0e; --sl-color-bg-danger: #d84646; --sl-color-bg-danger-subtle: #2b0e0e; --sl-color-bg-danger-hover: #e89090; --sl-color-bg-danger-active: #e06b6b; --sl-color-bg-disabled: #505050; /* Text */ --sl-color-text-primary: #f0f0f0; --sl-color-text-secondary: #a2a2a2; --sl-color-text-tertiary: #838383; --sl-color-text-disabled: #646464; --sl-color-text-on-accent: #ffffff; --sl-color-text-accent: #84bf93; --sl-color-text-accent-hover: #add5b7; --sl-color-text-info: #a8c9f6; --sl-color-text-success: #84bf93; --sl-color-text-warning: #f3e490; --sl-color-text-danger: #e89090; --sl-color-text-heading: #f7f7f7; /* Border */ --sl-color-border-default: #505050; --sl-color-border-subtle: #3c3c3c; --sl-color-border-strong: #838383; --sl-color-border-focus: #84bf93; --sl-color-border-disabled: #646464; --sl-color-border-accent: #5baa6f; --sl-color-border-info: #5884c0; --sl-color-border-success: #28773c; --sl-color-border-warning: #bca838; --sl-color-border-danger: #ad3838; /* Icon */ --sl-color-icon-default: #f0f0f0; --sl-color-icon-subtle: #a2a2a2; --sl-color-icon-disabled: #646464; --sl-color-icon-on-accent: #ffffff; --sl-color-icon-accent: #84bf93; --sl-color-icon-info: #a8c9f6; --sl-color-icon-success: #84bf93; --sl-color-icon-warning: #f3e490; --sl-color-icon-danger: #e89090; /* Transparent */ --sl-color-transparent: rgba(0, 0, 0, 0); } /* No responsive overrides at 768px */ /* Desktop and up */ @media (min-width: 1024px) { :root { /* ---- Typography ---- */ --sl-font-size-display: 5.4375rem; --sl-font-size-h1: 4.375rem; --sl-font-size-h2: 3.625rem; --sl-font-size-h3: 3.125rem; --sl-font-size-h4: 2.5625rem; --sl-font-size-h5: 2.0625rem; --sl-font-size-h6: 1.8125rem; --sl-font-size-body-lg: 1.5625rem; --sl-font-size-body-md: 1.25rem; --sl-font-size-body-sm: 1rem; --sl-font-size-caption: 0.75rem; --sl-font-size-label: 0.75rem; } } /* No responsive overrides at 1400px */ /* ========================================================================= * Base Reset * Consumes theme tokens to establish baseline document styles. * ========================================================================= */ html { height: 100vh; width: 100vw; background-color: var(--sl-color-bg-base); color: var(--sl-color-text-primary); font-family: var(--sl-font-family-body), sans-serif; font-size: var(--sl-font-size-body-md); line-height: var(--sl-line-height-body-md); } body { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; } :focus-visible { outline-width: var(--sl-focus-outline-width); outline-style: var(--sl-focus-outline-style); outline-color: var(--sl-color-border-focus); outline-offset: var(--sl-focus-outline-offset); }