css-is-awesome 1.1.0

package/dist/tokens.d.ts

@@ -0,0 +1,266 @@
+// Generated from scripts/theme-contract.json on 2026-09-01.
+// Do not edit by hand. Run `npm run build:token-types` to regenerate.
+
+/** Every CSS custom property cia themes are required to declare. */
+export type CiaToken =
+  | "--action-primary-active"
+  | "--action-primary-default"
+  | "--action-primary-hover"
+  | "--action-primary-wash"
+  | "--action-secondary-active"
+  | "--action-secondary-default"
+  | "--action-secondary-hover"
+  | "--action-secondary-wash"
+  | "--action-tertiary-active"
+  | "--action-tertiary-default"
+  | "--action-tertiary-hover"
+  | "--action-tertiary-wash"
+  | "--ai"
+  | "--ai-ink"
+  | "--ai-wash"
+  | "--background-default"
+  | "--background-navbar"
+  | "--background-subtle"
+  | "--blur-lg"
+  | "--blur-md"
+  | "--blur-sm"
+  | "--border-default"
+  | "--border-emphasis"
+  | "--border-focus"
+  | "--border-subtle"
+  | "--brand-primary"
+  | "--brand-primary-hover"
+  | "--code-accent"
+  | "--code-bg"
+  | "--code-blue"
+  | "--code-green"
+  | "--code-ink"
+  | "--code-muted"
+  | "--duration-fast"
+  | "--duration-normal"
+  | "--duration-slow"
+  | "--ease"
+  | "--error-default"
+  | "--error-subtle"
+  | "--error-text"
+  | "--feedback-error"
+  | "--feedback-info"
+  | "--feedback-success"
+  | "--feedback-warning"
+  | "--font-display"
+  | "--font-mono"
+  | "--font-primary"
+  | "--font-sans"
+  | "--font-script"
+  | "--font-serif"
+  | "--font-size-base"
+  | "--font-weight-medium"
+  | "--glow-lg"
+  | "--glow-md"
+  | "--glow-sm"
+  | "--graphite"
+  | "--guide"
+  | "--guide-soft"
+  | "--hair"
+  | "--hair-soft"
+  | "--info-default"
+  | "--info-subtle"
+  | "--info-text"
+  | "--ink"
+  | "--ink-faint"
+  | "--ink-soft"
+  | "--interactive-active"
+  | "--interactive-hover"
+  | "--line-height-normal"
+  | "--muted"
+  | "--ochre"
+  | "--ochre-wash"
+  | "--paper"
+  | "--paper-glass"
+  | "--paper-raised"
+  | "--paper-sunk"
+  | "--r-lg"
+  | "--r-md"
+  | "--r-sm"
+  | "--radius-full"
+  | "--radius-lg"
+  | "--radius-md"
+  | "--radius-sm"
+  | "--radius-xl"
+  | "--shadow-2xl"
+  | "--shadow-lg"
+  | "--shadow-md"
+  | "--shadow-sm"
+  | "--shadow-xl"
+  | "--shu"
+  | "--shu-wash"
+  | "--space-0"
+  | "--space-1"
+  | "--space-2"
+  | "--space-3"
+  | "--space-4"
+  | "--space-5"
+  | "--space-6"
+  | "--space-7"
+  | "--space-8"
+  | "--space-9"
+  | "--success-default"
+  | "--success-subtle"
+  | "--success-text"
+  | "--surface-default"
+  | "--surface-emphasis"
+  | "--surface-glass"
+  | "--surface-muted"
+  | "--surface-raised"
+  | "--surface-subtle"
+  | "--surface-sunk"
+  | "--text-inverse"
+  | "--text-link"
+  | "--text-link-hover"
+  | "--text-muted"
+  | "--text-primary"
+  | "--text-secondary"
+  | "--text-tertiary"
+  | "--warning-default"
+  | "--warning-subtle"
+  | "--warning-text"
+  | "--z-backdrop"
+  | "--z-dropdown"
+  | "--z-modal"
+  | "--z-popover"
+  | "--z-sticky"
+  | "--z-tooltip";
+
+/** Map of token name to its CSS value. */
+export interface CiaTokenMap {
+  "--action-primary-active": string;
+  "--action-primary-default": string;
+  "--action-primary-hover": string;
+  "--action-primary-wash": string;
+  "--action-secondary-active": string;
+  "--action-secondary-default": string;
+  "--action-secondary-hover": string;
+  "--action-secondary-wash": string;
+  "--action-tertiary-active": string;
+  "--action-tertiary-default": string;
+  "--action-tertiary-hover": string;
+  "--action-tertiary-wash": string;
+  "--ai": string;
+  "--ai-ink": string;
+  "--ai-wash": string;
+  "--background-default": string;
+  "--background-navbar": string;
+  "--background-subtle": string;
+  "--blur-lg": string;
+  "--blur-md": string;
+  "--blur-sm": string;
+  "--border-default": string;
+  "--border-emphasis": string;
+  "--border-focus": string;
+  "--border-subtle": string;
+  "--brand-primary": string;
+  "--brand-primary-hover": string;
+  "--code-accent": string;
+  "--code-bg": string;
+  "--code-blue": string;
+  "--code-green": string;
+  "--code-ink": string;
+  "--code-muted": string;
+  "--duration-fast": string;
+  "--duration-normal": string;
+  "--duration-slow": string;
+  "--ease": string;
+  "--error-default": string;
+  "--error-subtle": string;
+  "--error-text": string;
+  "--feedback-error": string;
+  "--feedback-info": string;
+  "--feedback-success": string;
+  "--feedback-warning": string;
+  "--font-display": string;
+  "--font-mono": string;
+  "--font-primary": string;
+  "--font-sans": string;
+  "--font-script": string;
+  "--font-serif": string;
+  "--font-size-base": string;
+  "--font-weight-medium": string;
+  "--glow-lg": string;
+  "--glow-md": string;
+  "--glow-sm": string;
+  "--graphite": string;
+  "--guide": string;
+  "--guide-soft": string;
+  "--hair": string;
+  "--hair-soft": string;
+  "--info-default": string;
+  "--info-subtle": string;
+  "--info-text": string;
+  "--ink": string;
+  "--ink-faint": string;
+  "--ink-soft": string;
+  "--interactive-active": string;
+  "--interactive-hover": string;
+  "--line-height-normal": string;
+  "--muted": string;
+  "--ochre": string;
+  "--ochre-wash": string;
+  "--paper": string;
+  "--paper-glass": string;
+  "--paper-raised": string;
+  "--paper-sunk": string;
+  "--r-lg": string;
+  "--r-md": string;
+  "--r-sm": string;
+  "--radius-full": string;
+  "--radius-lg": string;
+  "--radius-md": string;
+  "--radius-sm": string;
+  "--radius-xl": string;
+  "--shadow-2xl": string;
+  "--shadow-lg": string;
+  "--shadow-md": string;
+  "--shadow-sm": string;
+  "--shadow-xl": string;
+  "--shu": string;
+  "--shu-wash": string;
+  "--space-0": string;
+  "--space-1": string;
+  "--space-2": string;
+  "--space-3": string;
+  "--space-4": string;
+  "--space-5": string;
+  "--space-6": string;
+  "--space-7": string;
+  "--space-8": string;
+  "--space-9": string;
+  "--success-default": string;
+  "--success-subtle": string;
+  "--success-text": string;
+  "--surface-default": string;
+  "--surface-emphasis": string;
+  "--surface-glass": string;
+  "--surface-muted": string;
+  "--surface-raised": string;
+  "--surface-subtle": string;
+  "--surface-sunk": string;
+  "--text-inverse": string;
+  "--text-link": string;
+  "--text-link-hover": string;
+  "--text-muted": string;
+  "--text-primary": string;
+  "--text-secondary": string;
+  "--text-tertiary": string;
+  "--warning-default": string;
+  "--warning-subtle": string;
+  "--warning-text": string;
+  "--z-backdrop": string;
+  "--z-dropdown": string;
+  "--z-modal": string;
+  "--z-popover": string;
+  "--z-sticky": string;
+  "--z-tooltip": string;
+}
+
+/** Count of required tokens in the current contract. */
+export declare const CIA_TOKEN_COUNT: 127;

package/dist/tokens.min.css

@@ -0,0 +1 @@
+:where(:root){--brand-primary: #3A5FCD;--brand-primary-hover: #2E4A99;--brand-primary-active: #1E3A8A;--brand-secondary: #FF6B6B;--brand-secondary-hover: #E85555;--brand-secondary-active: #C55;--brand-accent: #09F;--brand-accent-hover: #0088E6;--background-default: #FFF;--background-subtle: #F8F6F0;--background-navbar: #FAFAFA;--surface-default: #FFF;--surface-subtle: #F8F6F0;--surface-muted: #F5F5F5;--surface-emphasis: #E5E5E5;--text-primary: #0f0f0f;--text-secondary: #525252;--text-muted: #6b6b6b;--text-inverse: #fff;--text-link: #384fff;--text-link-hover: #2a3acc;--border-default: #e5e5e5;--border-subtle: #f5f5f5;--border-emphasis: #d4d4d4;--border-focus: #384fff;--interactive-hover: rgba(0, 0, 0, 0.03);--interactive-active: rgba(0, 0, 0, 0.06);--action-primary-default: #3A5FCD;--action-primary-hover: #2E4A99;--action-primary-active: #1E3A8A;--action-secondary-default: #FF6B6B;--action-secondary-hover: #E85555;--action-secondary-active: #C55;--success-default: #10b981;--success-hover: #059669;--success-subtle: #ecfdf5;--success-text: #065f46;--warning-default: #f59e0b;--warning-hover: #d97706;--warning-subtle: #fffbeb;--warning-text: #92400e;--error-default: #DC2626;--error-hover: #B91C1C;--error-subtle: #FEF2F2;--error-text: #991B1B;--info-default: #3A5FCD;--info-hover: #2E4A99;--info-subtle: #EFF6FF;--info-text: #1E3A8A;--radius-none: 0;--radius-sm: 0.25rem;--radius-md: 0.375rem;--radius-lg: 0.5rem;--radius-xl: 0.75rem;--radius-2xl: 1rem;--radius-full: 9999px;--shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);--shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);--shadow-none: none;--font-primary: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;--font-secondary: Georgia, Times New Roman, serif;--font-mono: Fira Code, Consolas, Monaco, monospace;--space-1: 0.5rem;--space-2: 0.75rem;--space-3: 0.875rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--space-9: 6rem;--space-0: 0;--space-none: 0;--space-2xs: 0.25rem;--space-xs: var(--space-1);--space-sm: var(--space-2);--space-md: var(--space-4);--space-lg: var(--space-5);--space-xl: var(--space-6);--space-2xl: var(--space-7);--space-3xl: var(--space-8);--space-4xl: var(--space-9);--z-hide: -1;--z-base: 0;--z-dropdown: 1000;--z-sticky: 1100;--z-fixed: 1200;--z-backdrop: 1300;--z-modal: 1400;--z-popover: 1500;--z-tooltip: 1600;--z-toast: 1700;--font-size-1: 0.75rem;--font-size-2: 0.875rem;--font-size-3: 1rem;--font-size-4: 1.125rem;--font-size-5: 1.25rem;--font-size-6: 1.5rem;--font-size-7: 1.875rem;--font-size-8: 2.25rem;--font-size-9: 3rem;--font-size-10: 3.75rem;--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-size-6xl: 3.75rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-black: 900;--line-height-1: 1;--line-height-2: 1.25;--line-height-3: 1.375;--line-height-4: 1.5;--line-height-5: 1.625;--line-height-6: 2;--line-height-none: 1;--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--duration-instant: 0ms;--duration-fast: 150ms;--duration-normal: 250ms;--duration-slow: 400ms;--duration-slower: 600ms;--opacity-0: 0;--opacity-5: 0.05;--opacity-10: 0.1;--opacity-20: 0.2;--opacity-25: 0.25;--opacity-30: 0.3;--opacity-40: 0.4;--opacity-50: 0.5;--opacity-60: 0.6;--opacity-70: 0.7;--opacity-75: 0.75;--opacity-80: 0.8;--opacity-90: 0.9;--opacity-95: 0.95;--opacity-100: 1;--btn-padding-y: var(--space-1, 0.5rem);--btn-padding-x: var(--space-4, 1rem);--btn-radius: var(--radius-md, 0.25rem);--btn-font-weight: var(--font-weight-medium, 500);--btn-font-size: var(--font-size-base, 1rem);--btn-border-width: 1px;--card-padding: var(--space-4, 1rem);--card-radius: var(--radius-lg, 0.5rem);--card-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));--card-border: 1px solid var(--border-default);--input-padding-y: var(--space-1, 0.5rem);--input-padding-x: var(--space-2, 0.75rem);--input-radius: var(--radius-md, 0.25rem);--input-border-width: 1px;--alert-padding-y: var(--space-2, 0.75rem);--alert-padding-x: var(--space-4, 1rem);--alert-radius: var(--radius-md, 0.25rem);--badge-padding-y: var(--space-1, 0.5rem);--badge-padding-x: var(--space-1, 0.5rem);--badge-radius: var(--radius-full, 9999px);--tag-padding-y: var(--space-2xs, 0.25rem);--tag-padding-x: var(--space-2, 0.75rem);--tag-radius: var(--radius-md, 0.25rem);--modal-padding: var(--space-5, 1.5rem);--modal-radius: var(--radius-xl, 0.75rem);--modal-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));--popover-padding: var(--space-4, 1rem);--popover-radius: var(--radius-lg, 0.5rem);--popover-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));--tooltip-padding-y: var(--space-1, 0.5rem);--tooltip-padding-x: var(--space-1, 0.5rem);--tooltip-radius: var(--radius-md, 0.25rem);--dropdown-radius: var(--radius-md, 0.25rem);--dropdown-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1))}[data-theme=light]{--brand-primary: #3A5FCD;--brand-primary-hover: #2E4A99;--brand-primary-active: #1E3A8A;--brand-secondary: #FF6B6B;--brand-secondary-hover: #E85555;--brand-secondary-active: #C55;--brand-accent: #09F;--brand-accent-hover: #0088E6;--background-default: #FFF;--background-subtle: #F8F6F0;--background-navbar: #FAFAFA;--surface-default: #FFF;--surface-subtle: #F8F6F0;--surface-muted: #F5F5F5;--surface-emphasis: #E5E5E5;--text-primary: #0f0f0f;--text-secondary: #525252;--text-muted: #6b6b6b;--text-inverse: #fff;--text-link: #384fff;--text-link-hover: #2a3acc;--border-default: #e5e5e5;--border-subtle: #f5f5f5;--border-emphasis: #d4d4d4;--border-focus: #384fff;--interactive-hover: rgba(0, 0, 0, 0.03);--interactive-active: rgba(0, 0, 0, 0.06);--action-primary-default: #3A5FCD;--action-primary-hover: #2E4A99;--action-primary-active: #1E3A8A;--action-secondary-default: #FF6B6B;--action-secondary-hover: #E85555;--action-secondary-active: #C55;--success-default: #10b981;--success-hover: #059669;--success-subtle: #ecfdf5;--success-text: #065f46;--warning-default: #f59e0b;--warning-hover: #d97706;--warning-subtle: #fffbeb;--warning-text: #92400e;--error-default: #DC2626;--error-hover: #B91C1C;--error-subtle: #FEF2F2;--error-text: #991B1B;--info-default: #3A5FCD;--info-hover: #2E4A99;--info-subtle: #EFF6FF;--info-text: #1E3A8A;--radius-none: 0;--radius-sm: 0.25rem;--radius-md: 0.375rem;--radius-lg: 0.5rem;--radius-xl: 0.75rem;--radius-2xl: 1rem;--radius-full: 9999px;--shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);--shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);--shadow-none: none;--font-primary: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;--font-secondary: Georgia, Times New Roman, serif;--font-mono: Fira Code, Consolas, Monaco, monospace;--space-1: 0.5rem;--space-2: 0.75rem;--space-3: 0.875rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--space-9: 6rem;--space-0: 0;--space-none: 0;--space-2xs: 0.25rem;--space-xs: var(--space-1);--space-sm: var(--space-2);--space-md: var(--space-4);--space-lg: var(--space-5);--space-xl: var(--space-6);--space-2xl: var(--space-7);--space-3xl: var(--space-8);--space-4xl: var(--space-9);--z-hide: -1;--z-base: 0;--z-dropdown: 1000;--z-sticky: 1100;--z-fixed: 1200;--z-backdrop: 1300;--z-modal: 1400;--z-popover: 1500;--z-tooltip: 1600;--z-toast: 1700;--font-size-1: 0.75rem;--font-size-2: 0.875rem;--font-size-3: 1rem;--font-size-4: 1.125rem;--font-size-5: 1.25rem;--font-size-6: 1.5rem;--font-size-7: 1.875rem;--font-size-8: 2.25rem;--font-size-9: 3rem;--font-size-10: 3.75rem;--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-size-6xl: 3.75rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-black: 900;--line-height-1: 1;--line-height-2: 1.25;--line-height-3: 1.375;--line-height-4: 1.5;--line-height-5: 1.625;--line-height-6: 2;--line-height-none: 1;--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--duration-instant: 0ms;--duration-fast: 150ms;--duration-normal: 250ms;--duration-slow: 400ms;--duration-slower: 600ms;--opacity-0: 0;--opacity-5: 0.05;--opacity-10: 0.1;--opacity-20: 0.2;--opacity-25: 0.25;--opacity-30: 0.3;--opacity-40: 0.4;--opacity-50: 0.5;--opacity-60: 0.6;--opacity-70: 0.7;--opacity-75: 0.75;--opacity-80: 0.8;--opacity-90: 0.9;--opacity-95: 0.95;--opacity-100: 1;--btn-padding-y: var(--space-1, 0.5rem);--btn-padding-x: var(--space-4, 1rem);--btn-radius: var(--radius-md, 0.25rem);--btn-font-weight: var(--font-weight-medium, 500);--btn-font-size: var(--font-size-base, 1rem);--btn-border-width: 1px;--card-padding: var(--space-4, 1rem);--card-radius: var(--radius-lg, 0.5rem);--card-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));--card-border: 1px solid var(--border-default);--input-padding-y: var(--space-1, 0.5rem);--input-padding-x: var(--space-2, 0.75rem);--input-radius: var(--radius-md, 0.25rem);--input-border-width: 1px;--alert-padding-y: var(--space-2, 0.75rem);--alert-padding-x: var(--space-4, 1rem);--alert-radius: var(--radius-md, 0.25rem);--badge-padding-y: var(--space-1, 0.5rem);--badge-padding-x: var(--space-1, 0.5rem);--badge-radius: var(--radius-full, 9999px);--tag-padding-y: var(--space-2xs, 0.25rem);--tag-padding-x: var(--space-2, 0.75rem);--tag-radius: var(--radius-md, 0.25rem);--modal-padding: var(--space-5, 1.5rem);--modal-radius: var(--radius-xl, 0.75rem);--modal-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));--popover-padding: var(--space-4, 1rem);--popover-radius: var(--radius-lg, 0.5rem);--popover-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));--tooltip-padding-y: var(--space-1, 0.5rem);--tooltip-padding-x: var(--space-1, 0.5rem);--tooltip-radius: var(--radius-md, 0.25rem);--dropdown-radius: var(--radius-md, 0.25rem);--dropdown-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1))}[data-theme=dark]{--background-default: #0a0a0a;--background-subtle: #151515;--background-navbar: #1a1a1a;--surface-default: #151515;--surface-subtle: #1f1f1f;--surface-muted: #2a2a2a;--surface-emphasis: #353535;--text-primary: #FFF;--text-secondary: #b8b8b8;--text-muted: #768194;--text-inverse: #0a0a0a;--text-link: #09f;--text-link-hover: #5ebbff;--border-default: #2a2a2a;--border-subtle: #1f1f1f;--border-emphasis: #404040;--border-focus: #09f;--interactive-hover: rgba(255, 255, 255, 0.05);--interactive-active: rgba(255, 255, 255, 0.1);--action-primary-default: #6B8FE8;--action-primary-hover: #8BABF5;--action-primary-active: #3A5FCD;--action-secondary-default: #FF8A8A;--action-secondary-hover: #FFACAC;--action-secondary-active: #FF6B6B;--success-default: #34d399;--success-hover: #10b981;--success-subtle: #064e3b;--success-text: #6ee7b7;--warning-default: #fbbf24;--warning-hover: #f59e0b;--warning-subtle: #451a03;--warning-text: #fcd34d;--error-default: #f87171;--error-hover: #ef4444;--error-subtle: #450a0a;--error-text: #fca5a5;--info-default: #60a5fa;--info-hover: #3b82f6;--info-subtle: #172554;--info-text: #93c5fd;--shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);--shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.6);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);--shadow-none: none}@media(prefers-color-scheme: dark){:root:not([data-theme=light]){--background-default: #0a0a0a;--background-subtle: #151515;--background-navbar: #1a1a1a;--surface-default: #151515;--surface-subtle: #1f1f1f;--surface-muted: #2a2a2a;--surface-emphasis: #353535;--text-primary: #FFF;--text-secondary: #b8b8b8;--text-muted: #768194;--text-inverse: #0a0a0a;--text-link: #09f;--text-link-hover: #5ebbff;--border-default: #2a2a2a;--border-subtle: #1f1f1f;--border-emphasis: #404040;--border-focus: #09f;--interactive-hover: rgba(255, 255, 255, 0.05);--interactive-active: rgba(255, 255, 255, 0.1);--action-primary-default: #6B8FE8;--action-primary-hover: #8BABF5;--action-primary-active: #3A5FCD;--action-secondary-default: #FF8A8A;--action-secondary-hover: #FFACAC;--action-secondary-active: #FF6B6B;--success-default: #34d399;--success-hover: #10b981;--success-subtle: #064e3b;--success-text: #6ee7b7;--warning-default: #fbbf24;--warning-hover: #f59e0b;--warning-subtle: #451a03;--warning-text: #fcd34d;--error-default: #f87171;--error-hover: #ef4444;--error-subtle: #450a0a;--error-text: #fca5a5;--info-default: #60a5fa;--info-hover: #3b82f6;--info-subtle: #172554;--info-text: #93c5fd;--shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);--shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.6);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);--shadow-none: none}}:root{--touch-target-min: 24px}

package/figma-tokens/README.md

@@ -0,0 +1,57 @@
+# figma-tokens
+
+Design-token exports for design-tool sync. Ships in the npm package (whitelisted
+under `files` in `package.json`), so consumers can read it at
+`node_modules/css-is-awesome/figma-tokens/`.
+
+This folder is the deliverable from **Phase 3** of the roadmap — *"Export Figma
+Tokens JSON alongside SCSS (for design-tool sync)"*. The canonical token source
+for code remains `scss/theme/` (see `CONTRACT.md`); this folder mirrors that
+source in a format design tools can consume.
+
+## Files
+
+| File                     | What it owns                                                                                 |
+| ------------------------ | -------------------------------------------------------------------------------------------- |
+| `tokens.json`            | Full token set in [Tokens Studio for Figma](https://github.com/tokens-studio/figma-plugin) format (`{ value, type }` per token). Groups: `brand`, `color-light`, `color-dark`, `spacing`, `font-size`, `font-weight`, `line-height`, `border-radius`, `shadow`. |
+| `primitives-brand.scss`  | Brand primitives + global primitives — space, font-size/weight/family, line-height, letter-spacing, border-radius, duration, easing, opacity, breakpoint, container, brand color ramp. |
+| `semantic-light.scss`    | Semantic light-mode color tokens — backgrounds, surfaces, text, borders, action-primary/secondary, status (success/warning/error/info). |
+| `semantic-dark.scss`     | Semantic dark-mode color tokens — same shape as `semantic-light.scss`, with dark-mode values. |
+
+The `.scss` siblings exist for consumers who want to `@import` Figma-exported
+tokens directly without going through `tokens.json`. They are not consumed by
+the main `scss/` build — `scss/main.scss` pulls from `scss/theme/`.
+
+## Direction of truth
+
+**Hand-maintained.** Keep in sync with `scss/theme/` when tokens change.
+
+The `.scss` files carry a header that reads *"DO NOT EDIT — run `npm run
+tokens:convert`"*. That script no longer exists (no entry in `package.json`,
+no source under `scripts/`) — the header is a stale artifact from an earlier
+tooling iteration. Drift between this folder and `scss/theme/` is therefore
+real and possible; treat both halves as hand-edited until the auto-generator
+lands.
+
+Roadmap item `roadmap/epics/06-ai-integration.md` **Feature 6.3 — JSON token
+export** (P1, not yet done) tracks the work to auto-regenerate `tokens.json`
+from the SCSS source maps on every build, with stale output failing CI. Once
+that ships, this folder becomes generated and the README will be updated.
+
+## Importing into Figma
+
+1. Install [Tokens Studio for Figma](https://tokens.studio/).
+2. In the plugin, **Tools → Import → JSON file** and select
+   `node_modules/css-is-awesome/figma-tokens/tokens.json`.
+3. Map `color-light` / `color-dark` to Tokens Studio *themes* so dark mode
+   swaps cleanly inside Figma.
+
+## When you change a token
+
+Until Feature 6.3 lands, every token change is a two-step edit:
+
+1. Update the SCSS source under `scss/theme/` (the canonical contract).
+2. Mirror the same change in this folder — `tokens.json` plus the matching
+   `.scss` file (primitives vs semantic light vs semantic dark).
+3. Run `npm run validate-themes` to confirm the SCSS contract still holds.
+   (The validator does not currently diff `figma-tokens/` against `scss/theme/`.)

package/figma-tokens/primitives-brand.scss

@@ -0,0 +1,121 @@
+//
+// primitives-brand - Converted to rem
+// Generated: 2026-02-09T21:59:43.888Z
+// Base font size: 16px
+//
+// DO NOT EDIT THIS FILE DIRECTLY
+// Edit the JSON files and run: npm run tokens:convert
+//
+
+
+// space
+$space-xs: 0.5rem; // Original: 8px
+$space-sm: 0.75rem; // Original: 12px
+$space-md: 1rem; // Original: 16px
+$space-lg: 1.5rem; // Original: 24px
+$space-xl: 2rem; // Original: 32px
+$space-2xl: 3rem; // Original: 48px
+$space-3xl: 4rem; // Original: 64px
+$space-4xl: 6rem; // Original: 96px
+
+// font-size
+$font-size-xs: 0.75rem; // Original: 12px
+$font-size-sm: 0.875rem; // Original: 14px
+$font-size-base: 1rem; // Original: 16px
+$font-size-lg: 1.125rem; // Original: 18px
+$font-size-xl: 1.25rem; // Original: 20px
+$font-size-2xl: 1.5rem; // Original: 24px
+$font-size-3xl: 1.875rem; // Original: 30px
+$font-size-4xl: 2.25rem; // Original: 36px
+$font-size-5xl: 3rem; // Original: 48px
+$font-size-6xl: 3.75rem; // Original: 60px
+
+// font-weight
+$font-weight-light: 300; // Original: N/A
+$font-weight-normal: 400; // Original: N/A
+$font-weight-medium: 500; // Original: N/A
+$font-weight-semibold: 600; // Original: N/A
+$font-weight-bold: 700; // Original: N/A
+
+// line-height
+$line-height-tight: 1.25; // Original: N/A
+$line-height-snug: 1.375; // Original: N/A
+$line-height-normal: 1.5; // Original: N/A
+$line-height-relaxed: 1.625; // Original: N/A
+
+// font-family
+$font-family-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; // Original: N/A
+$font-family-serif: Georgia, 'Times New Roman', Times, serif; // Original: N/A
+$font-family-mono: 'Fira Code', 'Courier New', Courier, monospace; // Original: N/A
+
+// letter-spacing
+$letter-spacing-tighter: -0.05em; // Original: -0.05em
+$letter-spacing-tight: -0.025em; // Original: -0.025em
+$letter-spacing-normal: 0em; // Original: N/Aem
+$letter-spacing-wide: 0.025em; // Original: 0.025em
+$letter-spacing-wider: 0.05em; // Original: 0.05em
+$letter-spacing-widest: 0.1em; // Original: 0.1em
+
+// border-radius
+$border-radius-sm: 0.25rem; // Original: 4px
+$border-radius-md: 0.375rem; // Original: 6px
+$border-radius-lg: 0.5rem; // Original: 8px
+$border-radius-xl: 0.75rem; // Original: 12px
+$border-radius-2xl: 1rem; // Original: 16px
+$border-radius-full: 624.9375rem; // Original: 9999px
+
+// duration
+$duration-instant: 0ms; // Original: N/A
+$duration-fast: 150ms; // Original: 150
+$duration-normal: 250ms; // Original: 250
+$duration-slow: 400ms; // Original: 400
+$duration-slower: 600ms; // Original: 600
+
+// easing
+$easing-linear: cubic-bezier(0, 0, 1, 1); // Original: N/A
+$easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1); // Original: N/A
+$easing-ease-in: cubic-bezier(0.42, 0, 1, 1); // Original: N/A
+$easing-ease-out: cubic-bezier(0, 0, 0.58, 1); // Original: N/A
+$easing-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); // Original: N/A
+$easing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55); // Original: N/A
+
+// opacity
+$opacity-0: 0; // Original: N/A
+$opacity-10: 0.1; // Original: N/A
+$opacity-20: 0.2; // Original: N/A
+$opacity-30: 0.3; // Original: N/A
+$opacity-40: 0.4; // Original: N/A
+$opacity-50: 0.5; // Original: N/A
+$opacity-60: 0.6; // Original: N/A
+$opacity-70: 0.7; // Original: N/A
+$opacity-80: 0.8; // Original: N/A
+$opacity-90: 0.9; // Original: N/A
+$opacity-100: 1; // Original: N/A
+$opacity-disabled: 0.38; // Original: N/A
+
+// breakpoint
+$breakpoint-xs: 20rem; // Original: 320px
+$breakpoint-sm: 40rem; // Original: 640px
+$breakpoint-md: 48rem; // Original: 768px
+$breakpoint-lg: 64rem; // Original: 1024px
+$breakpoint-xl: 80rem; // Original: 1280px
+$breakpoint-2xl: 96rem; // Original: 1536px
+
+// container
+$container-sm: 40rem; // Original: 640px
+$container-md: 48rem; // Original: 768px
+$container-lg: 64rem; // Original: 1024px
+$container-xl: 80rem; // Original: 1280px
+$container-2xl: 96rem; // Original: 1536px
+
+// color
+
+// brand
+$color-brand-primary: #3A5FCD; // Original: N/A
+$color-brand-primary-hover: #2E4A99; // Original: N/A
+$color-brand-primary-active: #1E3A8A; // Original: N/A
+$color-brand-secondary: #FF6B6B; // Original: N/A
+$color-brand-secondary-hover: #E85555; // Original: N/A
+$color-brand-secondary-active: #CC5555; // Original: N/A
+$color-brand-accent: #0099FF; // Original: N/A
+$color-brand-accent-hover: #0088E6; // Original: N/A

package/figma-tokens/semantic-dark.scss

@@ -0,0 +1,61 @@
+//
+// semantic-dark - Converted to rem
+// Generated: 2026-02-09T21:59:43.891Z
+// Base font size: 16px
+//
+// DO NOT EDIT THIS FILE DIRECTLY
+// Edit the JSON files and run: npm run tokens:convert
+//
+
+
+// color
+
+// background
+$color-background-default: #0A0A0A; // Original: N/A
+$color-background-subtle: #151515; // Original: N/A
+$color-background-navbar: #1A1A1A; // Original: N/A
+
+// surface
+$color-surface-default: #151515; // Original: N/A
+$color-surface-subtle: #1F1F1F; // Original: N/A
+$color-surface-muted: #2A2A2A; // Original: N/A
+
+// text
+$color-text-primary: #FFFFFF; // Original: N/A
+$color-text-secondary: #B8B8B8; // Original: N/A
+$color-text-muted: #768194; // Original: N/A
+$color-text-inverse: #0A0A0A; // Original: N/A
+$color-text-link: #0099FF; // Original: N/A
+$color-text-link-hover: #5EBBFF; // Original: N/A
+
+// border
+$color-border-default: #2A2A2A; // Original: N/A
+$color-border-subtle: #1F1F1F; // Original: N/A
+$color-border-emphasis: #404040; // Original: N/A
+$color-border-focus: #0099FF; // Original: N/A
+
+// action-primary
+$color-action-primary-default: #60A5FA; // Original: N/A
+$color-action-primary-hover: #3B82F6; // Original: N/A
+$color-action-primary-active: #2563EB; // Original: N/A
+
+// action-secondary
+$color-action-secondary-default: #F87171; // Original: N/A
+$color-action-secondary-hover: #EF4444; // Original: N/A
+$color-action-secondary-active: #DC2626; // Original: N/A
+
+// status-success
+$color-status-success-default: #34D399; // Original: N/A
+$color-status-success-hover: #10B981; // Original: N/A
+
+// status-warning
+$color-status-warning-default: #FBBF24; // Original: N/A
+$color-status-warning-hover: #F59E0B; // Original: N/A
+
+// status-error
+$color-status-error-default: #F87171; // Original: N/A
+$color-status-error-hover: #EF4444; // Original: N/A
+
+// status-info
+$color-status-info-default: #60A5FA; // Original: N/A
+$color-status-info-hover: #3B82F6; // Original: N/A

package/figma-tokens/semantic-light.scss

@@ -0,0 +1,61 @@
+//
+// semantic-light - Converted to rem
+// Generated: 2026-02-09T21:59:43.890Z
+// Base font size: 16px
+//
+// DO NOT EDIT THIS FILE DIRECTLY
+// Edit the JSON files and run: npm run tokens:convert
+//
+
+
+// color
+
+// background
+$color-background-default: #FFFFFF; // Original: N/A
+$color-background-subtle: #F8F6F0; // Original: N/A
+$color-background-navbar: #FAFAFA; // Original: N/A
+
+// surface
+$color-surface-default: #FFFFFF; // Original: N/A
+$color-surface-subtle: #F8F6F0; // Original: N/A
+$color-surface-muted: #F5F5F5; // Original: N/A
+
+// text
+$color-text-primary: #0F0F0F; // Original: N/A
+$color-text-secondary: #525252; // Original: N/A
+$color-text-muted: #8A8A8A; // Original: N/A
+$color-text-inverse: #FFFFFF; // Original: N/A
+$color-text-link: #3A5FCD; // Original: N/A
+$color-text-link-hover: #2E4A99; // Original: N/A
+
+// border
+$color-border-default: #E5E5E5; // Original: N/A
+$color-border-subtle: #F5F5F5; // Original: N/A
+$color-border-emphasis: #D4D4D4; // Original: N/A
+$color-border-focus: #3A5FCD; // Original: N/A
+
+// action-primary
+$color-action-primary-default: #3A5FCD; // Original: N/A
+$color-action-primary-hover: #2E4A99; // Original: N/A
+$color-action-primary-active: #1E3A8A; // Original: N/A
+
+// action-secondary
+$color-action-secondary-default: #FF6B6B; // Original: N/A
+$color-action-secondary-hover: #E85555; // Original: N/A
+$color-action-secondary-active: #CC5555; // Original: N/A
+
+// status-success
+$color-status-success-default: #10B981; // Original: N/A
+$color-status-success-hover: #059669; // Original: N/A
+
+// status-warning
+$color-status-warning-default: #F59E0B; // Original: N/A
+$color-status-warning-hover: #D97706; // Original: N/A
+
+// status-error
+$color-status-error-default: #DC2626; // Original: N/A
+$color-status-error-hover: #B91C1C; // Original: N/A
+
+// status-info
+$color-status-info-default: #3A5FCD; // Original: N/A
+$color-status-info-hover: #2E4A99; // Original: N/A