@neuravision/construct 1.1.0

package/tokens/tokens.css

@@ -0,0 +1,434 @@
+/* Generated by design/scripts/build-tokens.mjs. Do not edit directly. */
+:root {
+  /* Color primitives */
+  --color-slate-0: #FFFFFF;
+  --color-slate-50: #F5F7FA;
+  --color-slate-100: #E9EEF4;
+  --color-slate-200: #D3DDE7;
+  --color-slate-300: #B7C6D6;
+  --color-slate-400: #8EA3B8;
+  --color-slate-500: #6B8399;
+  --color-slate-600: #4E667B;
+  --color-slate-700: #364C5F;
+  --color-slate-800: #263747;
+  --color-slate-900: #172533;
+  --color-slate-950: #0E1720;
+  --color-ocean-50: #E9F4F7;
+  --color-ocean-100: #CFE5EC;
+  --color-ocean-200: #A5CBD8;
+  --color-ocean-300: #78B1C4;
+  --color-ocean-400: #4D97AF;
+  --color-ocean-500: #2E7E96;
+  --color-ocean-600: #21657A;
+  --color-ocean-700: #174C5D;
+  --color-ocean-800: #103745;
+  --color-ocean-900: #0B2631;
+  --color-teal-50: #E7F7F6;
+  --color-teal-100: #C5ECEA;
+  --color-teal-200: #93DAD6;
+  --color-teal-300: #63C7C1;
+  --color-teal-400: #35B2AA;
+  --color-teal-500: #1C9891;
+  --color-teal-600: #167B76;
+  --color-teal-700: #115F5C;
+  --color-teal-800: #0D4744;
+  --color-teal-900: #0A3533;
+  --color-amber-50: #FFF6E5;
+  --color-amber-100: #FFE8BF;
+  --color-amber-200: #FFD180;
+  --color-amber-300: #FFB74D;
+  --color-amber-400: #FF9E1A;
+  --color-amber-500: #E88300;
+  --color-amber-600: #B86600;
+  --color-amber-700: #8A4D00;
+  --color-amber-800: #5E3500;
+  --color-amber-900: #3D2300;
+  --color-red-50: #FDECEC;
+  --color-red-100: #F8CACA;
+  --color-red-200: #F3A3A3;
+  --color-red-300: #EB7575;
+  --color-red-400: #DE4A4A;
+  --color-red-500: #C93535;
+  --color-red-600: #A22828;
+  --color-red-700: #7C1F1F;
+  --color-red-800: #561717;
+  --color-red-900: #361010;
+  --color-green-50: #E8F6EF;
+  --color-green-100: #C7EAD9;
+  --color-green-200: #9EDCC0;
+  --color-green-300: #70CBA3;
+  --color-green-400: #48B988;
+  --color-green-500: #2EA070;
+  --color-green-600: #237F59;
+  --color-green-700: #1B6145;
+  --color-green-800: #134533;
+  --color-green-900: #0C2E22;
+  /* Typography */
+  --font-family-brand: "Sora", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-family-text: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-family-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 28px;
+  --font-size-4xl: 32px;
+  --font-size-5xl: 40px;
+  --font-size-6xl: 48px;
+  --line-height-xs: 16px;
+  --line-height-sm: 20px;
+  --line-height-md: 24px;
+  --line-height-lg: 28px;
+  --line-height-xl: 32px;
+  --line-height-2xl: 36px;
+  --line-height-3xl: 40px;
+  --line-height-4xl: 44px;
+  --line-height-5xl: 52px;
+  --line-height-6xl: 60px;
+  --letter-spacing-tight: -0.3px;
+  --letter-spacing-normal: 0px;
+  --letter-spacing-wide: 0.3px;
+  /* Semantic typography */
+  --type-display-font-family: var(--font-family-heading);
+  --type-display-font-size: var(--font-size-6xl);
+  --type-display-line-height: var(--line-height-6xl);
+  --type-display-font-weight: var(--font-weight-bold);
+  --type-display-letter-spacing: var(--letter-spacing-tight);
+  --type-h1-font-family: var(--font-family-heading);
+  --type-h1-font-size: var(--font-size-5xl);
+  --type-h1-line-height: var(--line-height-5xl);
+  --type-h1-font-weight: var(--font-weight-bold);
+  --type-h1-letter-spacing: var(--letter-spacing-tight);
+  --type-h2-font-family: var(--font-family-heading);
+  --type-h2-font-size: var(--font-size-4xl);
+  --type-h2-line-height: var(--line-height-4xl);
+  --type-h2-font-weight: var(--font-weight-semibold);
+  --type-h2-letter-spacing: var(--letter-spacing-normal);
+  --type-h3-font-family: var(--font-family-heading);
+  --type-h3-font-size: var(--font-size-3xl);
+  --type-h3-line-height: var(--line-height-3xl);
+  --type-h3-font-weight: var(--font-weight-semibold);
+  --type-h3-letter-spacing: var(--letter-spacing-normal);
+  --type-h4-font-family: var(--font-family-heading);
+  --type-h4-font-size: var(--font-size-2xl);
+  --type-h4-line-height: var(--line-height-2xl);
+  --type-h4-font-weight: var(--font-weight-semibold);
+  --type-h4-letter-spacing: var(--letter-spacing-normal);
+  --type-body-font-family: var(--font-family-body);
+  --type-body-font-size: var(--font-size-md);
+  --type-body-line-height: var(--line-height-md);
+  --type-body-font-weight: var(--font-weight-regular);
+  --type-body-letter-spacing: var(--letter-spacing-normal);
+  --type-body-sm-font-family: var(--font-family-body);
+  --type-body-sm-font-size: var(--font-size-sm);
+  --type-body-sm-line-height: var(--line-height-sm);
+  --type-body-sm-font-weight: var(--font-weight-regular);
+  --type-body-sm-letter-spacing: var(--letter-spacing-normal);
+  --type-label-font-family: var(--font-family-body);
+  --type-label-font-size: var(--font-size-sm);
+  --type-label-line-height: var(--line-height-sm);
+  --type-label-font-weight: var(--font-weight-semibold);
+  --type-label-letter-spacing: var(--letter-spacing-wide);
+  --type-caption-font-family: var(--font-family-body);
+  --type-caption-font-size: var(--font-size-xs);
+  --type-caption-line-height: var(--line-height-xs);
+  --type-caption-font-weight: var(--font-weight-regular);
+  --type-caption-letter-spacing: var(--letter-spacing-normal);
+  /* Spacing */
+  --space-0: 0px;
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 6px;
+  --space-4: 8px;
+  --space-5: 12px;
+  --space-6: 16px;
+  --space-7: 20px;
+  --space-8: 24px;
+  --space-9: 32px;
+  --space-10: 40px;
+  --space-11: 48px;
+  --space-12: 64px;
+  --space-13: 80px;
+  /* Radius */
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-round: 999px;
+  /* Border widths */
+  --border-thin: 1px;
+  --border-medium: 2px;
+  --border-thick: 3px;
+  /* Opacity */
+  --opacity-muted: 0.7;
+  --opacity-disabled: 0.5;
+  --opacity-overlay: 0.6;
+  /* Sizes */
+  --control-height-xs: 28px;
+  --control-height-sm: 32px;
+  --control-height-md: 40px;
+  --control-height-lg: 48px;
+  --control-height-calendar-day: 36px;
+  --icon-sm: 16px;
+  --icon-md: 20px;
+  --icon-lg: 24px;
+  --icon-xl: 32px;
+  /* Layout */
+  --container-sm: 640px;
+  --container-md: 960px;
+  --container-lg: 1200px;
+  --container-xl: 1440px;
+  --gutter-sm: 16px;
+  --gutter-md: 24px;
+  --gutter-lg: 32px;
+  --grid-gap-sm: 16px;
+  --grid-gap-md: 24px;
+  --grid-gap-lg: 32px;
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(10, 25, 41, 0.08);
+  --shadow-sm: 0 2px 6px rgba(10, 25, 41, 0.10);
+  --shadow-md: 0 8px 20px rgba(10, 25, 41, 0.12);
+  --shadow-lg: 0 16px 36px rgba(10, 25, 41, 0.14);
+  --shadow-xl: 0 24px 56px rgba(10, 25, 41, 0.18);
+  /* Motion */
+  --duration-fast: 120ms;
+  --duration-normal: 200ms;
+  --duration-slow: 280ms;
+  --duration-xslow: 400ms;
+  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate: cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  /* Z-Index */
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-overlay: 1200;
+  --z-modal: 1300;
+  --z-toast: 1400;
+  --z-tooltip: 1500;
+  /* Breakpoints */
+  --bp-xs: 360px;
+  --bp-sm: 600px;
+  --bp-md: 900px;
+  --bp-lg: 1200px;
+  --bp-xl: 1536px;
+  /* Semantic (light) */
+  --color-brand-primary: var(--color-ocean-600);
+  --color-brand-primary-hover: var(--color-ocean-700);
+  --color-brand-primary-active: var(--color-ocean-800);
+  --color-brand-accent: var(--color-teal-600);
+  --color-brand-accent-hover: var(--color-teal-700);
+  --color-brand-accent-active: var(--color-teal-800);
+  --color-text-primary: var(--color-slate-950);
+  --color-text-secondary: var(--color-slate-700);
+  --color-text-muted: var(--color-slate-600);
+  --color-text-inverse: var(--color-slate-0);
+  --color-bg-canvas: var(--color-slate-0);
+  --color-bg-surface: var(--color-slate-50);
+  --color-bg-elevated: var(--color-slate-0);
+  --color-bg-muted: var(--color-slate-100);
+  --color-border-subtle: var(--color-slate-200);
+  --color-border-default: var(--color-slate-300);
+  --color-border-strong: var(--color-slate-500);
+  --color-state-info: var(--color-ocean-600);
+  --color-state-success: var(--color-green-500);
+  --color-state-warning: var(--color-amber-400);
+  --color-state-danger: var(--color-red-500);
+  --color-state-info-surface: var(--color-ocean-50);
+  --color-state-success-surface: var(--color-green-50);
+  --color-state-warning-surface: var(--color-amber-50);
+  --color-state-danger-surface: var(--color-red-50);
+  --color-state-info-border: var(--color-ocean-200);
+  --color-state-success-border: var(--color-green-200);
+  --color-state-warning-border: var(--color-amber-200);
+  --color-state-danger-border: var(--color-red-200);
+  --color-state-info-text: var(--color-ocean-700);
+  --color-state-success-text: var(--color-green-700);
+  --color-state-warning-text: var(--color-amber-700);
+  --color-state-danger-text: var(--color-red-700);
+  --color-overlay-scrim: rgba(14, 23, 32, 0.6);
+  --color-focus-ring: var(--color-teal-400);
+  --theme-color-scheme: light;
+  --font-family-heading: var(--font-family-brand);
+  --font-family-body: var(--font-family-text);
+  --font-family-code: var(--font-family-mono);
+  --radius-control: var(--radius-md);
+  --radius-card: var(--radius-lg);
+  --radius-modal: var(--radius-xl);
+  --radius-pill: var(--radius-round);
+  --shadow-card: var(--shadow-sm);
+  --shadow-dropdown: var(--shadow-md);
+  --shadow-modal: var(--shadow-lg);
+}
+
+[data-theme="dark"] {
+  /* Semantic (dark) */
+  --color-brand-primary: var(--color-ocean-400);
+  --color-brand-primary-hover: var(--color-ocean-300);
+  --color-brand-primary-active: var(--color-ocean-500);
+  --color-brand-accent: var(--color-teal-400);
+  --color-brand-accent-hover: var(--color-teal-300);
+  --color-brand-accent-active: var(--color-teal-500);
+  --color-text-primary: var(--color-slate-0);
+  --color-text-secondary: var(--color-slate-200);
+  --color-text-muted: var(--color-slate-400);
+  --color-text-inverse: var(--color-slate-0);
+  --color-bg-canvas: var(--color-slate-950);
+  --color-bg-surface: var(--color-slate-800);
+  --color-bg-elevated: var(--color-slate-700);
+  --color-bg-muted: var(--color-slate-900);
+  --color-border-subtle: var(--color-slate-700);
+  --color-border-default: var(--color-slate-600);
+  --color-border-strong: var(--color-slate-500);
+  --color-state-info: var(--color-ocean-300);
+  --color-state-success: var(--color-green-300);
+  --color-state-warning: var(--color-amber-300);
+  --color-state-danger: var(--color-red-300);
+  --color-state-info-surface: var(--color-ocean-900);
+  --color-state-success-surface: var(--color-green-900);
+  --color-state-warning-surface: var(--color-amber-900);
+  --color-state-danger-surface: var(--color-red-900);
+  --color-state-info-border: var(--color-ocean-700);
+  --color-state-success-border: var(--color-green-700);
+  --color-state-warning-border: var(--color-amber-700);
+  --color-state-danger-border: var(--color-red-700);
+  --color-state-info-text: var(--color-ocean-200);
+  --color-state-success-text: var(--color-green-200);
+  --color-state-warning-text: var(--color-amber-200);
+  --color-state-danger-text: var(--color-red-200);
+  --color-overlay-scrim: rgba(8, 14, 20, 0.7);
+  --color-focus-ring: var(--color-teal-300);
+  --theme-color-scheme: dark;
+}
+
+[data-theme="high-contrast"] {
+  /* Semantic (high-contrast) */
+  --color-brand-primary: var(--color-ocean-800);
+  --color-brand-primary-hover: var(--color-ocean-900);
+  --color-brand-primary-active: var(--color-ocean-700);
+  --color-brand-accent: var(--color-teal-700);
+  --color-brand-accent-hover: var(--color-teal-800);
+  --color-brand-accent-active: var(--color-teal-600);
+  --color-text-primary: var(--color-slate-950);
+  --color-text-secondary: var(--color-slate-800);
+  --color-text-muted: var(--color-slate-700);
+  --color-text-inverse: var(--color-slate-0);
+  --color-bg-canvas: var(--color-slate-0);
+  --color-bg-surface: var(--color-slate-0);
+  --color-bg-elevated: var(--color-slate-0);
+  --color-bg-muted: var(--color-slate-50);
+  --color-border-subtle: var(--color-slate-400);
+  --color-border-default: var(--color-slate-700);
+  --color-border-strong: var(--color-slate-950);
+  --color-state-info: var(--color-ocean-800);
+  --color-state-success: var(--color-green-700);
+  --color-state-warning: var(--color-amber-700);
+  --color-state-danger: var(--color-red-700);
+  --color-state-info-surface: var(--color-ocean-100);
+  --color-state-success-surface: var(--color-green-100);
+  --color-state-warning-surface: var(--color-amber-100);
+  --color-state-danger-surface: var(--color-red-100);
+  --color-state-info-border: var(--color-ocean-700);
+  --color-state-success-border: var(--color-green-700);
+  --color-state-warning-border: var(--color-amber-700);
+  --color-state-danger-border: var(--color-red-700);
+  --color-state-info-text: var(--color-ocean-800);
+  --color-state-success-text: var(--color-green-800);
+  --color-state-warning-text: var(--color-amber-800);
+  --color-state-danger-text: var(--color-red-800);
+  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
+  --color-focus-ring: var(--color-amber-400);
+  --theme-color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    /* Semantic (dark (system)) */
+    --color-brand-primary: var(--color-ocean-400);
+    --color-brand-primary-hover: var(--color-ocean-300);
+    --color-brand-primary-active: var(--color-ocean-500);
+    --color-brand-accent: var(--color-teal-400);
+    --color-brand-accent-hover: var(--color-teal-300);
+    --color-brand-accent-active: var(--color-teal-500);
+    --color-text-primary: var(--color-slate-0);
+    --color-text-secondary: var(--color-slate-200);
+    --color-text-muted: var(--color-slate-400);
+    --color-text-inverse: var(--color-slate-0);
+    --color-bg-canvas: var(--color-slate-950);
+    --color-bg-surface: var(--color-slate-800);
+    --color-bg-elevated: var(--color-slate-700);
+    --color-bg-muted: var(--color-slate-900);
+    --color-border-subtle: var(--color-slate-700);
+    --color-border-default: var(--color-slate-600);
+    --color-border-strong: var(--color-slate-500);
+    --color-state-info: var(--color-ocean-300);
+    --color-state-success: var(--color-green-300);
+    --color-state-warning: var(--color-amber-300);
+    --color-state-danger: var(--color-red-300);
+    --color-state-info-surface: var(--color-ocean-900);
+    --color-state-success-surface: var(--color-green-900);
+    --color-state-warning-surface: var(--color-amber-900);
+    --color-state-danger-surface: var(--color-red-900);
+    --color-state-info-border: var(--color-ocean-700);
+    --color-state-success-border: var(--color-green-700);
+    --color-state-warning-border: var(--color-amber-700);
+    --color-state-danger-border: var(--color-red-700);
+    --color-state-info-text: var(--color-ocean-200);
+    --color-state-success-text: var(--color-green-200);
+    --color-state-warning-text: var(--color-amber-200);
+    --color-state-danger-text: var(--color-red-200);
+    --color-overlay-scrim: rgba(8, 14, 20, 0.7);
+    --color-focus-ring: var(--color-teal-300);
+    --theme-color-scheme: dark;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root:not([data-theme]) {
+    /* Semantic (high-contrast (system)) */
+    --color-brand-primary: var(--color-ocean-800);
+    --color-brand-primary-hover: var(--color-ocean-900);
+    --color-brand-primary-active: var(--color-ocean-700);
+    --color-brand-accent: var(--color-teal-700);
+    --color-brand-accent-hover: var(--color-teal-800);
+    --color-brand-accent-active: var(--color-teal-600);
+    --color-text-primary: var(--color-slate-950);
+    --color-text-secondary: var(--color-slate-800);
+    --color-text-muted: var(--color-slate-700);
+    --color-text-inverse: var(--color-slate-0);
+    --color-bg-canvas: var(--color-slate-0);
+    --color-bg-surface: var(--color-slate-0);
+    --color-bg-elevated: var(--color-slate-0);
+    --color-bg-muted: var(--color-slate-50);
+    --color-border-subtle: var(--color-slate-400);
+    --color-border-default: var(--color-slate-700);
+    --color-border-strong: var(--color-slate-950);
+    --color-state-info: var(--color-ocean-800);
+    --color-state-success: var(--color-green-700);
+    --color-state-warning: var(--color-amber-700);
+    --color-state-danger: var(--color-red-700);
+    --color-state-info-surface: var(--color-ocean-100);
+    --color-state-success-surface: var(--color-green-100);
+    --color-state-warning-surface: var(--color-amber-100);
+    --color-state-danger-surface: var(--color-red-100);
+    --color-state-info-border: var(--color-ocean-700);
+    --color-state-success-border: var(--color-green-700);
+    --color-state-warning-border: var(--color-amber-700);
+    --color-state-danger-border: var(--color-red-700);
+    --color-state-info-text: var(--color-ocean-800);
+    --color-state-success-text: var(--color-green-800);
+    --color-state-warning-text: var(--color-amber-800);
+    --color-state-danger-text: var(--color-red-800);
+    --color-overlay-scrim: rgba(14, 23, 32, 0.7);
+    --color-focus-ring: var(--color-amber-400);
+    --theme-color-scheme: light;
+  }
+}