/* ========================================================================== DESIGN TOKENS — Editorial / Architectural / Gallery system Three-layer architecture: Primitive → Semantic → Component Do not hand-edit resolved values in Semantic/Component layers — change the Primitive value they point to instead. See design-system.md. ========================================================================== */ /* ========================================================================== LAYER 1 — PRIMITIVES Raw values. No meaning assigned yet. ========================================================================== */ :root { /* --- Color: Warm Neutral (the "material" ramp) --------------------- One hue family carries all four named neutrals as anchor stops: 100 = Warm Ivory (plaster/wall), 300 = Sand (travertine), 500 = Stone (limestone), 900 = Charcoal (shadow). */ --neutral-50: #FAF8F5; --neutral-100: #F4F0EB; /* Warm Ivory — primary background */ --neutral-200: #EAE3D9; --neutral-300: #D7CDC1; /* Sand — secondary surface */ --neutral-400: #C0B3A2; --neutral-500: #9A8C7E; /* Stone — borders, secondary text, dividers */ --neutral-600: #7A6D60; --neutral-700: #5C5148; --neutral-800: #3D362F; --neutral-900: #262018; /* Charcoal — primary text, dark ground */ --neutral-950: #181410; /* --- Color: Cobalt (primary) — hsl(221 72% L) ------------------------ */ --cobalt-50: #EEF2FC; --cobalt-100: #DCE6F8; --cobalt-200: #B4C9EF; --cobalt-300: #82A2E3; --cobalt-400: #4E75D2; --cobalt-500: #2D5DC8; --cobalt-600: #2157C8; /* brand value — Cobalt */ --cobalt-700: #1B449E; --cobalt-800: #163576; --cobalt-900: #10264F; --cobalt-950: #091730; /* --- Color: Gold (secondary) — hsl(39 97% L) ------------------------- */ --gold-50: #FFF9EC; --gold-100: #FEF0D2; --gold-200: #FCDD9F; --gold-300: #FCC968; --gold-400: #FCB73C; --gold-500: #FBA70F; /* brand value — Gold */ --gold-600: #E08F0A; --gold-700: #B87209; --gold-800: #8C5708; --gold-900: #5F3B06; --gold-950: #3A2404; /* --- Color: Sage (supporting) — hsl(91 22% L) ------------------------ */ --sage-50: #F1F4EE; --sage-100: #E2E9DB; --sage-200: #C6D3B7; --sage-300: #A5BB8F; --sage-400: #87A46F; --sage-500: #738E5A; /* brand value — Sage */ --sage-600: #5F7749; --sage-700: #4A5D39; --sage-800: #354228; --sage-900: #212819; --sage-950: #12160D; /* --- Color: Violet (supporting) — hsl(253 60% L) ---------------------- */ --violet-50: #F4F2FC; --violet-100: #E7E2F8; --violet-200: #CFC5F0; --violet-300: #B3A2E6; --violet-400: #A08DDE; --violet-500: #8F7ADE; /* brand value — Violet */ --violet-600: #7361BC; --violet-700: #584A92; --violet-800: #3E3468; --violet-900: #251E40; --violet-950: #161327; /* --- Color: functional-only utility (not part of the brand palette; used solely for form-validation error states) --------------------- */ --utility-danger-500: #B3492E; --utility-danger-050: #F7E9E4; /* --- Typography: family, weight ------------------------------------- */ --font-family-base: "General Sans", "Helvetica Neue", Arial, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* --- Typography: size scale (editorial — wide jumps at the top) ----- */ --font-size-caption: 0.75rem; /* 12px */ --font-size-label: 0.8125rem; /* 13px */ --font-size-body-sm: 0.875rem; /* 14px */ --font-size-body: 1rem; /* 16px */ --font-size-body-lg: 1.125rem; /* 18px */ --font-size-heading-sm: 1.375rem; /* 22px */ --font-size-heading-md: 1.75rem; /* 28px */ --font-size-heading-lg: 2.25rem; /* 36px */ --font-size-heading-xl: 2.75rem; /* 44px */ --font-size-display-lg: 3.5rem; /* 56px */ --font-size-display-xl: 4.5rem; /* 72px */ --font-size-display-2xl: 6rem; /* 96px */ /* --- Typography: line height ----------------------------------------- */ --line-height-tight: 1.05; /* display */ --line-height-snug: 1.2; /* headings */ --line-height-normal: 1.45; /* body-lg / labels */ --line-height-relaxed: 1.65; /* body */ /* --- Typography: letter spacing --------------------------------------- */ --letter-spacing-tightest: -0.02em; /* display */ --letter-spacing-tight: -0.01em; /* headings */ --letter-spacing-normal: 0em; /* body */ --letter-spacing-wide: 0.06em; /* nav / small labels */ --letter-spacing-widest: 0.12em; /* wall-label caption, uppercase */ /* --- Spacing (8px base, extended for spacious/architectural layouts) - */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --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 */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ /* --- Radius (mostly rectilinear — architecture reads sharp, not soft) - */ --radius-none: 0; --radius-sm: 2px; /* tags, small chips */ --radius-default: 4px; /* inputs, buttons */ --radius-md: 8px; /* image frames, cards */ --radius-lg: 16px; /* large hero framing elements only */ --radius-full: 9999px; /* pills — nav "Menu" pill only */ /* --- Elevation ("natural light", not app-style drop shadow) ---------- */ --shadow-none: none; --shadow-soft-sm: 0 1px 2px rgb(38 32 24 / 0.04); --shadow-soft: 0 4px 16px rgb(38 32 24 / 0.06); --shadow-soft-lg: 0 12px 40px rgb(38 32 24 / 0.10); --shadow-focus-ring: 0 0 0 3px rgb(33 87 200 / 0.35); /* --- Motion ----------------------------------------------------------- */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-base: 350ms; --duration-slow: 600ms; --duration-slower: 900ms; /* panel reveals, cover-up transitions */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-soft: cubic-bezier(0.65, 0, 0.35, 1); /* signature calm curve */ /* --- Grid & layout ----------------------------------------------------- */ --grid-columns: 12; /* alias of --grid-columns-desktop, kept for back-compat */ --grid-columns-mobile: 4; /* < 768px */ --grid-columns-tablet: 8; /* 768–1023px */ --grid-columns-desktop: 12; /* >= 1024px */ --grid-gutter-mobile: 1rem; /* 16px — below md (768px) */ --grid-gutter: 1.5rem; /* 24px — md and above */ --container-max: 90rem; /* 1440px — grid container ceiling */ --measure-reading: 45rem; /* 720px — long-form text measure, independent of grid width */ --breakpoint-sm: 30rem; /* 480px */ --breakpoint-md: 48rem; /* 768px */ --breakpoint-lg: 64rem; /* 1024px */ --breakpoint-xl: 80rem; /* 1280px */ --breakpoint-2xl: 90rem; /* 1440px */ --page-margin-mobile: 1.5rem; /* 24px */ --page-margin-tablet: 3rem; /* 48px */ --page-margin-desktop: 7rem; /* 112px */ /* --- Z-index ------------------------------------------------------------ */ --z-base: 0; --z-sticky-panel: 10; --z-floating-nav: 50; --z-overlay: 100; --z-modal: 200; --z-tooltip: 300; } /* ========================================================================== LAYER 2 — SEMANTIC TOKENS Purpose-based aliases. Swap these to re-theme without touching components. ========================================================================== */ :root { /* --- Surfaces & text (default: light ground) --------------------------- */ --color-background: var(--neutral-100); /* Warm Ivory */ --color-surface: var(--neutral-50); --color-surface-alt: var(--neutral-300); /* Sand */ --color-foreground: var(--neutral-900); /* Charcoal */ --color-foreground-muted: var(--neutral-600); --color-border: var(--neutral-400); --color-border-strong: var(--neutral-500); /* Stone */ /* --- Surfaces & text (dark ground — Charcoal panels/sections) --------- */ --color-background-dark: var(--neutral-900); /* Charcoal */ --color-surface-dark: var(--neutral-800); --color-foreground-on-dark: var(--neutral-100); /* Warm Ivory */ --color-foreground-on-dark-muted: var(--neutral-400); --color-border-on-dark: var(--neutral-700); /* --- Primary (Cobalt) — the system's one text-safe brand color -------- */ --color-primary: var(--cobalt-600); --color-primary-hover: var(--cobalt-700); --color-primary-active: var(--cobalt-800); --color-primary-foreground: var(--neutral-50); /* --- Accent on dark ground (Gold) — reciprocal to Cobalt on light ----- */ --color-accent-on-dark: var(--gold-500); --color-accent-on-dark-hover: var(--gold-400); /* --- Decorative / data accents (icons, illustration, charts, large display type only — never small text on light neutrals; see design-system.md § Color usage rules for contrast ratios) ------------ */ --color-accent-gold: var(--gold-500); --color-accent-sage: var(--sage-500); --color-accent-violet: var(--violet-500); /* --- Functional --------------------------------------------------------- */ --color-danger: var(--utility-danger-500); --color-danger-foreground: var(--neutral-50); --color-danger-surface: var(--utility-danger-050); --color-ring: var(--color-primary); /* --- Spacing semantics --------------------------------------------------- */ --spacing-component-sm: var(--space-2); --spacing-component: var(--space-4); --spacing-component-lg: var(--space-6); --spacing-section-sm: var(--space-16); --spacing-section: var(--space-24); --spacing-section-lg: var(--space-32); --spacing-threshold: var(--space-12); /* rule spacing between panels/sections */ --spacing-frame: var(--space-4); /* mat/passe-partout inset for imagery */ } /* ========================================================================== LAYER 3 — COMPONENT TOKENS Component-specific, referencing the semantic layer only. ========================================================================== */ :root { /* --- Button (primary / solid) ------------------------------------------- */ --button-bg: var(--color-primary); --button-fg: var(--color-primary-foreground); --button-hover-bg: var(--color-primary-hover); --button-active-bg: var(--color-primary-active); --button-padding-x: var(--space-6); --button-padding-y: var(--space-3); --button-radius: var(--radius-default); --button-font-size: var(--font-size-body-sm); --button-font-weight: var(--font-weight-medium); --button-letter-spacing: var(--letter-spacing-wide); /* --- Button (outline — architectural "frame" variant) ------------------- */ --button-outline-border: var(--color-foreground); --button-outline-fg: var(--color-foreground); --button-outline-hover-bg: var(--color-foreground); --button-outline-hover-fg: var(--color-background); /* --- Link / text button (preferred for editorial contexts) ------------- */ --link-fg: var(--color-primary); --link-underline-color: currentColor; --link-hover-fg: var(--color-primary-hover); /* --- Tag / label (museum wall-text motif) ------------------------------- */ --tag-border: var(--color-border-strong); --tag-fg: var(--color-foreground-muted); --tag-padding-x: var(--space-3); --tag-padding-y: var(--space-1); --tag-radius: var(--radius-sm); --tag-font-size: var(--font-size-caption); --tag-letter-spacing: var(--letter-spacing-widest); /* --- Frame (image/project card mat, like a picture frame) --------------- */ --frame-bg: var(--color-surface); --frame-border: var(--color-border); --frame-inset: var(--spacing-frame); --frame-radius: var(--radius-md); --frame-shadow: var(--shadow-soft); --frame-shadow-hover: var(--shadow-soft-lg); /* --- Input / form field --------------------------------------------------- */ --input-bg: var(--color-surface); --input-border: var(--color-border); --input-fg: var(--color-foreground); --input-placeholder: var(--color-foreground-muted); --input-focus-border: var(--color-primary); --input-focus-ring: var(--shadow-focus-ring); --input-error-border: var(--color-danger); --input-padding-x: var(--space-4); --input-padding-y: var(--space-3); --input-radius: var(--radius-default); /* --- Divider / threshold rule --------------------------------------------- */ --divider-color: var(--color-border); --divider-thickness: 1px; /* --- Floating nav pill (recolors per section per existing site pattern) - */ --nav-pill-bg: var(--color-foreground); --nav-pill-fg: var(--color-background); --nav-pill-radius: var(--radius-full); --nav-pill-padding-x: var(--space-6); --nav-pill-padding-y: var(--space-2); --nav-pill-shadow: var(--shadow-soft); }