@aiaiai-pt/design-system 0.1.0

package/tokens/base.css

@@ -0,0 +1,175 @@
+/*
+ * aiaiai Design System — Primitive Tokens (base.css)
+ *
+ * Raw values with no semantic meaning.
+ * These are building blocks — never use directly in components.
+ * Semantic tokens (semantic.css) reference these.
+ *
+ * Naming: --raw-{category}-{name}
+ */
+
+:root {
+  /* ─── Color: Neutrals (warm undertone, hue ~55 OKLCH) ─── */
+  --raw-color-white: #faf9f7;
+  --raw-color-neutral-50: #f7f5f3;
+  --raw-color-neutral-100: #f0ece8;
+  --raw-color-neutral-200: #e8e2dc;
+  --raw-color-neutral-300: #e0d9d1;
+  --raw-color-neutral-400: #c4bbb0;
+  --raw-color-neutral-500: #a8a29e;
+  --raw-color-neutral-600: #78716c;
+  --raw-color-neutral-700: #57534e;
+  --raw-color-neutral-800: #3d3835;
+  --raw-color-neutral-900: #2c2825;
+  --raw-color-neutral-950: #1c1917;
+
+  /* ─── Color: Orange (accent — creation, focus) ─── */
+  --raw-color-orange-50: #fff7ed;
+  --raw-color-orange-100: #fff0e8;
+  --raw-color-orange-200: #fed7aa;
+  --raw-color-orange-300: #fdba74;
+  --raw-color-orange-400: #fb923c;
+  --raw-color-orange-500: #ff6b35;
+  --raw-color-orange-600: #e85a28;
+  --raw-color-orange-700: #c2410c;
+  --raw-color-orange-800: #9a3412;
+  --raw-color-orange-900: #7c2d12;
+
+  /* ─── Color: Red (destructive — warm-shifted, hue ~30 OKLCH) ─── */
+  --raw-color-red-50: #fef3f0;
+  --raw-color-red-100: #fde3dc;
+  --raw-color-red-200: #fcc9bc;
+  --raw-color-red-300: #f9a393;
+  --raw-color-red-400: #f47264;
+  --raw-color-red-500: #e84e3e;
+  --raw-color-red-600: #d03526;
+  --raw-color-red-700: #ae2a1e;
+  --raw-color-red-800: #8f251c;
+  --raw-color-red-900: #76211a;
+
+  /* ─── Color: Green (success — warm-shifted, hue ~145 OKLCH) ─── */
+  --raw-color-green-50: #f2faf0;
+  --raw-color-green-100: #dff5d9;
+  --raw-color-green-200: #bfebb5;
+  --raw-color-green-300: #8fdb82;
+  --raw-color-green-400: #5ec452;
+  --raw-color-green-500: #3daa33;
+  --raw-color-green-600: #2d8c26;
+  --raw-color-green-700: #256f20;
+  --raw-color-green-800: #21581e;
+  --raw-color-green-900: #1c4a1a;
+
+  /* ─── Color: Amber (warning — already warm, hue ~80 OKLCH) ─── */
+  --raw-color-amber-50: #fefaed;
+  --raw-color-amber-100: #fdf1c8;
+  --raw-color-amber-200: #fbe38e;
+  --raw-color-amber-300: #f8d054;
+  --raw-color-amber-400: #f5bc28;
+  --raw-color-amber-500: #e8a008;
+  --raw-color-amber-600: #c58204;
+  --raw-color-amber-700: #9e6308;
+  --raw-color-amber-800: #824e0f;
+  --raw-color-amber-900: #6e4012;
+
+  /* ─── Color: Blue (info — warm-shifted to teal-blue, hue ~240 OKLCH) ─── */
+  --raw-color-blue-50: #f0f5fa;
+  --raw-color-blue-100: #dce9f5;
+  --raw-color-blue-200: #bed6ed;
+  --raw-color-blue-300: #92bbe0;
+  --raw-color-blue-400: #5f9ad0;
+  --raw-color-blue-500: #3f7dbe;
+  --raw-color-blue-600: #2e63a3;
+  --raw-color-blue-700: #274f85;
+  --raw-color-blue-800: #24416e;
+  --raw-color-blue-900: #22375c;
+
+  /* ─── Typography: Font Families ─── */
+  --raw-font-sans: "Instrument Sans", sans-serif;
+  --raw-font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;
+
+  /* ─── Typography: Font Sizes ─── */
+  --raw-font-size-11: 0.6875rem;
+  --raw-font-size-12: 0.75rem;
+  --raw-font-size-13: 0.8125rem;
+  --raw-font-size-14: 0.875rem;
+  --raw-font-size-15: 0.9375rem;
+  --raw-font-size-18: 1.125rem;
+  --raw-font-size-24: 1.5rem;
+  --raw-font-size-36: 2.25rem;
+
+  /* ─── Typography: Font Weights ─── */
+  --raw-font-weight-regular: 400;
+  --raw-font-weight-medium: 500;
+  --raw-font-weight-semibold: 600;
+
+  /* ─── Typography: Line Heights ─── */
+  --raw-line-height-tight: 1.1;
+  --raw-line-height-snug: 1.2;
+  --raw-line-height-heading: 1.3;
+  --raw-line-height-relaxed: 1.4;
+  --raw-line-height-body: 1.5;
+
+  /* ─── Typography: Letter Spacing ─── */
+  --raw-tracking-tight: -0.02em;
+  --raw-tracking-snug: -0.01em;
+  --raw-tracking-heading: -0.005em;
+  --raw-tracking-normal: 0;
+  --raw-tracking-wide: 0.02em;
+  --raw-tracking-wider: 0.04em;
+  --raw-tracking-micro: 0.005em;
+  --raw-tracking-loose: 0.01em;
+
+  /* ─── Spacing ─── */
+  --raw-space-2: 0.125rem;
+  --raw-space-4: 0.25rem;
+  --raw-space-8: 0.5rem;
+  --raw-space-16: 1rem;
+  --raw-space-24: 1.5rem;
+  --raw-space-32: 2rem;
+  --raw-space-48: 3rem;
+  --raw-space-64: 4rem;
+  --raw-space-96: 6rem;
+
+  /* ─── Border Width ─── */
+  --raw-border-width-1: 1px;
+  --raw-border-width-2: 2px;
+
+  /* ─── Radius ─── */
+  --raw-radius-2: 2px;
+  --raw-radius-4: 4px;
+  --raw-radius-8: 8px;
+  --raw-radius-999: 999px;
+  --raw-radius-circle: 50%;
+
+  /* ─── Shadows (warm — rgba(44,40,37,...)) ─── */
+  --raw-shadow-sm:
+    0 1px 3px rgba(44, 40, 37, 0.08), 0 1px 2px rgba(44, 40, 37, 0.06);
+  --raw-shadow-md:
+    0 4px 16px rgba(44, 40, 37, 0.12), 0 2px 4px rgba(44, 40, 37, 0.08);
+
+  /* ─── Motion: Durations ─── */
+  --raw-duration-100: 100ms;
+  --raw-duration-150: 150ms;
+  --raw-duration-250: 250ms;
+  --raw-duration-400: 400ms;
+  --raw-duration-600: 600ms;
+
+  /* ─── Motion: Easings ─── */
+  --raw-easing-default: cubic-bezier(0.2, 0, 0, 1);
+  --raw-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --raw-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --raw-easing-linear: linear;
+
+  /* ─── Grid ─── */
+  --raw-grid-columns: 12;
+  --raw-content-640: 640px;
+  --raw-content-960: 960px;
+  --raw-content-1200: 1200px;
+  --raw-content-1440: 1440px;
+
+  /* ─── Breakpoints (for reference — use in @media queries) ─── */
+  --raw-breakpoint-sm: 640px;
+  --raw-breakpoint-md: 768px;
+  --raw-breakpoint-lg: 1024px;
+  --raw-breakpoint-xl: 1280px;
+}