/* ============================================================ Isaac D'Césares — Brand Design Tokens Version 1.1 · March 2026 The Membrane Palette: where human warmth meets digital precision. Import this single file to access all brand tokens. ============================================================ */ :root { /* -------------------------------------------------------- 1. COLORS — Core Palette -------------------------------------------------------- */ /* Primary: The Human Register */ --color-terracotta: #B35530; --color-terracotta-light: #D4724F; --color-terracotta-dark: #944425; --color-terracotta-10: rgba(179, 85, 48, 0.10); --color-terracotta-20: rgba(179, 85, 48, 0.20); /* Primary: The Digital Register */ --color-teal: #1B756D; --color-teal-light: #3AAFA8; --color-teal-dark: #145C56; --color-teal-08: rgba(27, 117, 109, 0.08); --color-teal-10: rgba(27, 117, 109, 0.10); --color-teal-12: rgba(27, 117, 109, 0.12); --color-teal-20: rgba(27, 117, 109, 0.20); /* Canvas */ --color-cream: #FAF6EE; --color-charcoal: #1A1B1F; /* Accents */ --color-amber: #D49A3A; --color-amber-light: #E8B44A; --color-amber-10: rgba(212, 154, 58, 0.10); --color-burgundy: #7A3345; --color-burgundy-light: #9A4558; --color-burgundy-10: rgba(122, 51, 69, 0.10); --color-sage: #5A8A6E; --color-sage-light: #6FBF8A; --color-sage-10: rgba(90, 138, 110, 0.10); /* -------------------------------------------------------- 2. COLORS — Neutral Scale (warm-tinted grays) -------------------------------------------------------- */ --color-neutral-50: #FAF6EE; --color-neutral-100: #F0EBE1; --color-neutral-200: #E2DCD2; --color-neutral-300: #C8C1B5; --color-neutral-400: #A39D93; --color-neutral-500: #7D776E; --color-neutral-600: #5C564E; --color-neutral-700: #3D3832; --color-neutral-800: #2A2622; --color-neutral-900: #1A1B1F; /* -------------------------------------------------------- 3. COLORS — Semantic (Light Mode defaults) -------------------------------------------------------- */ --color-text-primary: var(--color-neutral-800); --color-text-secondary: var(--color-neutral-600); --color-text-tertiary: var(--color-neutral-400); --color-text-accent: var(--color-teal); --color-text-on-accent: #FFFFFF; --color-bg-primary: var(--color-cream); --color-bg-secondary: var(--color-neutral-100); --color-bg-tertiary: var(--color-neutral-200); --color-border-default: var(--color-neutral-200); --color-border-emphasis: var(--color-neutral-300); --color-overlay-bg: rgba(26, 27, 31, 0.70); --color-success: var(--color-sage); --color-warning: var(--color-amber); --color-error: #C44040; --color-info: var(--color-teal); /* -------------------------------------------------------- 4. COLORS — Gradients -------------------------------------------------------- */ --gradient-membrane: linear-gradient(135deg, #B35530 0%, #1B756D 100%); --gradient-warmth: radial-gradient(ellipse 600px 300px at 15% 0%, rgba(179, 85, 48, 0.08) 0%, transparent 70%); --gradient-depth: linear-gradient(180deg, var(--color-charcoal) 0%, #12131A 100%); --gradient-divider: linear-gradient(90deg, transparent, var(--color-border-default), transparent); --gradient-subtle: linear-gradient(150deg, var(--color-bg-secondary) 8%, var(--color-bg-primary) 92%); /* Ambient glow stop-colors (for layout background radial gradients) */ --bg-glow-terracotta: rgba(179, 85, 48, 0.09); --bg-glow-teal: rgba(27, 117, 109, 0.10); --bg-glow-sage: rgba(90, 138, 110, 0.08); --bg-glow-focal: rgba(179, 85, 48, 0.06); --bg-glow-focal-loaded: rgba(179, 85, 48, 0.10); /* -------------------------------------------------------- 5. COLORS — Code Block (always dark) -------------------------------------------------------- */ --code-bg: #1E1F26; --code-text: #E2DCD2; --code-border: rgba(255, 255, 255, 0.06); --code-keyword: #E07050; --code-string: #7BC494; --code-function: #E8B44A; --code-comment: #7D776E; --code-number: #5AC8C0; /* -------------------------------------------------------- 6. TYPOGRAPHY — Font Stacks -------------------------------------------------------- */ --font-serif: 'Fraunces', 'Georgia', 'Times New Roman', serif; --font-sans: 'Instrument Sans', 'Inter', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* -------------------------------------------------------- 7. TYPOGRAPHY — Scale (fluid clamp values) -------------------------------------------------------- */ --text-display: clamp(2.25rem, 3.5vw + 1rem, 3.75rem); --text-h1: clamp(1.875rem, 2.5vw + 1rem, 2.75rem); --text-h2: clamp(1.5rem, 2vw + 0.75rem, 2rem); --text-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); --text-h4: clamp(1.125rem, 1vw + 0.5rem, 1.25rem); --text-body-lg: clamp(1.0625rem, 0.5vw + 0.9rem, 1.1875rem); --text-body: clamp(1rem, 0.25vw + 0.9rem, 1.0625rem); --text-small: 0.875rem; --text-xs: 0.75rem; --text-code: clamp(0.875rem, 0.25vw + 0.8rem, 0.9375rem); --text-sm: var(--text-small); --text-base: var(--text-body); --text-md: var(--text-h4); --text-lg: var(--text-h3); --text-xl: var(--text-h2); /* -------------------------------------------------------- 8. TYPOGRAPHY — Line Height -------------------------------------------------------- */ --leading-display: 1.1; --leading-heading: 1.2; --leading-subheading: 1.3; --leading-body: 1.6; --leading-body-lg: 1.5; --leading-small: 1.5; --leading-code: 1.6; --leading-label: 1.2; /* -------------------------------------------------------- 9. TYPOGRAPHY — Letter Spacing -------------------------------------------------------- */ --tracking-display: -0.02em; --tracking-heading: -0.015em; --tracking-subheading: -0.01em; --tracking-body: 0; --tracking-small: 0.01em; --tracking-label: 0.08em; /* -------------------------------------------------------- 10. TYPOGRAPHY — Font Weight -------------------------------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* -------------------------------------------------------- 11. SPACING — Scale (4px base unit) -------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* -------------------------------------------------------- 12. LAYOUT — Containers & Grid -------------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-full: 100%; --site-margin: clamp(1.5rem, 5vw, 5rem); /* -------------------------------------------------------- 13. BORDER RADIUS -------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* -------------------------------------------------------- 14. SHADOWS (warm-tinted) -------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(26, 27, 31, 0.06), 0 1px 2px rgba(26, 27, 31, 0.04); --shadow-md: 0 4px 12px rgba(26, 27, 31, 0.08), 0 2px 4px rgba(26, 27, 31, 0.04); --shadow-lg: 0 12px 32px rgba(26, 27, 31, 0.12), 0 4px 8px rgba(26, 27, 31, 0.06); --shadow-glow-warm: 0 0 24px rgba(179, 85, 48, 0.15); --shadow-glow-teal: 0 0 24px rgba(27, 117, 109, 0.15); /* -------------------------------------------------------- 15. BORDERS -------------------------------------------------------- */ --border-default: 1px solid var(--color-border-default); --border-emphasis: 1px solid var(--color-border-emphasis); --border-accent: 2px solid var(--color-terracotta); /* -------------------------------------------------------- 16. MOTION — Durations -------------------------------------------------------- */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* -------------------------------------------------------- 17. MOTION — Easing -------------------------------------------------------- */ --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0.0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* -------------------------------------------------------- 18. MOTION — Transitions (composite shorthand) -------------------------------------------------------- */ --transition-fast: 150ms cubic-bezier(0.25, 0.1, 0.25, 1); --transition-default: 250ms cubic-bezier(0.25, 0.1, 0.25, 1); --transition-slow: 400ms cubic-bezier(0.25, 0.1, 0.25, 1); /* -------------------------------------------------------- 19. OPACITY — Scale -------------------------------------------------------- */ --opacity-subtle: 0.10; --opacity-light: 0.20; --opacity-medium: 0.50; --opacity-overlay: 0.70; --opacity-heavy: 0.85; /* -------------------------------------------------------- 20. Z-INDEX — Stacking Context -------------------------------------------------------- */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-nav: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* -------------------------------------------------------- 21. FOCUS — Accessibility -------------------------------------------------------- */ --focus-ring: 2px solid var(--color-teal); --focus-ring-offset: 2px; /* -------------------------------------------------------- 22. IMAGERY — Photo treatment -------------------------------------------------------- */ --photo-warmth: sepia(0.05) saturate(1.05) brightness(1.02); --photo-border-radius: var(--radius-lg); --photo-shadow: var(--shadow-md); /* -------------------------------------------------------- 23. BREAKPOINTS (for reference — use in media queries) -------------------------------------------------------- */ /* --bp-sm: 640px; */ /* --bp-md: 768px; */ /* --bp-lg: 1024px; */ /* --bp-xl: 1280px; */ } /* =========================================================== DARK MODE =========================================================== */ /* Auto dark mode — only applies when no explicit data-theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-terracotta: var(--color-terracotta-light); --color-text-primary: #F0EBE1; --color-text-secondary: #A39D93; --color-text-tertiary: #7D776E; --color-text-accent: var(--color-teal-light); --color-bg-primary: var(--color-charcoal); --color-bg-secondary: #242429; --color-bg-tertiary: #2E2E34; --color-border-default: #3D3842; --color-border-emphasis: #5C564E; --color-success: var(--color-sage-light); --color-warning: var(--color-amber-light); --color-error: #E86060; --color-info: var(--color-teal-light); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.20); --shadow-glow-warm: 0 0 24px rgba(212, 114, 79, 0.20); --bg-glow-terracotta: rgba(179, 85, 48, 0.12); --bg-glow-teal: rgba(58, 175, 168, 0.10); --bg-glow-sage: rgba(58, 175, 168, 0.08); --bg-glow-focal: rgba(179, 85, 48, 0.08); --bg-glow-focal-loaded: rgba(179, 85, 48, 0.14); } } /* Manual dark mode (for toggle support) */ [data-theme="dark"], :root.theme-dark { --color-terracotta: var(--color-terracotta-light); --color-text-primary: #F0EBE1; --color-text-secondary: #A39D93; --color-text-tertiary: #7D776E; --color-text-accent: var(--color-teal-light); --color-bg-primary: var(--color-charcoal); --color-bg-secondary: #242429; --color-bg-tertiary: #2E2E34; --color-border-default: #3D3842; --color-border-emphasis: #5C564E; --color-success: var(--color-sage-light); --color-warning: var(--color-amber-light); --color-error: #E86060; --color-info: var(--color-teal-light); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.20); --shadow-glow-warm: 0 0 24px rgba(212, 114, 79, 0.20); --bg-glow-terracotta: rgba(179, 85, 48, 0.12); --bg-glow-teal: rgba(58, 175, 168, 0.10); --bg-glow-sage: rgba(58, 175, 168, 0.08); --bg-glow-focal: rgba(179, 85, 48, 0.08); --bg-glow-focal-loaded: rgba(179, 85, 48, 0.14); } /* =========================================================== REDUCED MOTION =========================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 150ms; --transition-fast: 0ms; --transition-default: 0ms; --transition-slow: 0ms; } /* Replace transform-based animations with opacity-only fades */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-property: opacity, color, background-color, border-color, box-shadow !important; scroll-behavior: auto !important; } }