/* ============================================================================
1VisionHub — Design Tokens (v1.0.0)
Drop-in CSS custom properties. Import first, before base.css.
USAGE
Scope a pillar by adding data-pillar to a section or the body:
============================================================================ */
:root {
/* ---- Type scale (fluid) ---- */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
--text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
--text-hero: clamp(2.75rem, 0.5rem + 6vw, 6.5rem);
/* ---- Spacing (4px base) ---- */
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
--space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
--space-32: 8rem;
/* ---- Radius ---- */
--radius-sm: 0.375rem;
--radius-md: 0.625rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--radius-2xl: 2rem;
--radius-full: 9999px;
/* ---- Motion ---- */
--transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);
--transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
--transition-reveal: 800ms cubic-bezier(0.16, 1, 0.3, 1);
/* ---- Content widths ---- */
--content-narrow: 680px;
--content-default: 1040px;
--content-wide: 1280px;
--content-ultra: 1440px;
/* ---- Font families ---- */
--font-display: 'Fraunces', 'Times New Roman', serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* ============================================================
COLOR — Dark-first (site is dark by default; no light mode)
============================================================ */
/* Surfaces */
--color-bg: #0a0712;
--color-bg-deep: #050310;
--color-surface: #110a1f;
--color-surface-2: #181029;
--color-surface-3: #221634;
--color-surface-glass: rgba(24, 16, 41, 0.6);
--color-divider: rgba(255, 255, 255, 0.06);
--color-border: rgba(255, 255, 255, 0.10);
--color-border-strong: rgba(255, 255, 255, 0.18);
/* Text */
--color-text: #f5f0ff;
--color-text-muted: #b5acc7;
--color-text-faint: #7a708f;
--color-text-inverse: #0a0712;
/* Master brand accent (violet — inherited from Individual pillar) */
--color-brand: #a07cff;
--color-brand-hover: #b894ff;
--color-brand-soft: rgba(160, 124, 255, 0.16);
/* ---- Pillar 1 — InnerEdge (Individual) ---- */
--pillar-individual-primary: #9b6dff;
--pillar-individual-bright: #c4a3ff;
--pillar-individual-deep: #4a1d99;
--pillar-individual-glow: rgba(155, 109, 255, 0.45);
--pillar-individual-soft: rgba(155, 109, 255, 0.12);
--pillar-individual-surface: #1a0f33;
--pillar-individual-gradient: linear-gradient(135deg, #2d1166 0%, #6b2bb8 45%, #b07dff 100%);
--pillar-individual-aurora:
radial-gradient(ellipse at 20% 30%, rgba(155, 109, 255, 0.35) 0%, transparent 50%),
radial-gradient(ellipse at 80% 60%, rgba(217, 70, 239, 0.25) 0%, transparent 55%),
radial-gradient(ellipse at 50% 90%, rgba(99, 102, 241, 0.30) 0%, transparent 60%);
/* ---- Pillar 2 — TeamSync (Team) ---- */
--pillar-team-primary: #2dd4bf;
--pillar-team-bright: #67e8f9;
--pillar-team-deep: #0d4f4a;
--pillar-team-glow: rgba(45, 212, 191, 0.40);
--pillar-team-soft: rgba(45, 212, 191, 0.10);
--pillar-team-surface: #061e22;
--pillar-team-gradient: linear-gradient(135deg, #052e2b 0%, #0e7a72 50%, #2dd4bf 100%);
--pillar-team-aurora:
radial-gradient(ellipse at 25% 25%, rgba(45, 212, 191, 0.30) 0%, transparent 55%),
radial-gradient(ellipse at 75% 65%, rgba(34, 211, 238, 0.22) 0%, transparent 60%),
radial-gradient(ellipse at 50% 95%, rgba(20, 184, 166, 0.25) 0%, transparent 60%);
/* ---- Pillar 3 — OrgAgile (Organization) ---- */
--pillar-org-primary: #84e074;
--pillar-org-bright: #bef264;
--pillar-org-deep: #14532d;
--pillar-org-glow: rgba(132, 224, 116, 0.40);
--pillar-org-soft: rgba(132, 224, 116, 0.10);
--pillar-org-surface: #0a1f10;
--pillar-org-gradient: linear-gradient(135deg, #0d2e16 0%, #2d6b39 50%, #84e074 100%);
--pillar-org-aurora:
radial-gradient(ellipse at 30% 30%, rgba(132, 224, 116, 0.28) 0%, transparent 55%),
radial-gradient(ellipse at 70% 70%, rgba(190, 242, 100, 0.20) 0%, transparent 60%),
radial-gradient(ellipse at 50% 90%, rgba(74, 222, 128, 0.25) 0%, transparent 60%);
/* ---- Shadows / Glows ---- */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
--shadow-glow-violet: 0 0 60px rgba(155, 109, 255, 0.35);
--shadow-glow-teal: 0 0 60px rgba(45, 212, 191, 0.30);
--shadow-glow-emerald: 0 0 60px rgba(132, 224, 116, 0.30);
/* ---- Default `--accent` = brand violet ---- */
--accent: var(--color-brand);
--accent-bright: var(--pillar-individual-bright);
--accent-soft: var(--color-brand-soft);
--accent-glow: var(--pillar-individual-glow);
--accent-shadow: var(--shadow-glow-violet);
--accent-aurora: var(--pillar-individual-aurora);
}
/* ============================================================
Pillar scope helpers — applies to any element or section
============================================================ */
[data-pillar="individual"] {
--accent: var(--pillar-individual-primary);
--accent-bright: var(--pillar-individual-bright);
--accent-deep: var(--pillar-individual-deep);
--accent-glow: var(--pillar-individual-glow);
--accent-soft: var(--pillar-individual-soft);
--accent-surface: var(--pillar-individual-surface);
--accent-gradient: var(--pillar-individual-gradient);
--accent-aurora: var(--pillar-individual-aurora);
--accent-shadow: var(--shadow-glow-violet);
}
[data-pillar="team"] {
--accent: var(--pillar-team-primary);
--accent-bright: var(--pillar-team-bright);
--accent-deep: var(--pillar-team-deep);
--accent-glow: var(--pillar-team-glow);
--accent-soft: var(--pillar-team-soft);
--accent-surface: var(--pillar-team-surface);
--accent-gradient: var(--pillar-team-gradient);
--accent-aurora: var(--pillar-team-aurora);
--accent-shadow: var(--shadow-glow-teal);
}
[data-pillar="org"] {
--accent: var(--pillar-org-primary);
--accent-bright: var(--pillar-org-bright);
--accent-deep: var(--pillar-org-deep);
--accent-glow: var(--pillar-org-glow);
--accent-soft: var(--pillar-org-soft);
--accent-surface: var(--pillar-org-surface);
--accent-gradient: var(--pillar-org-gradient);
--accent-aurora: var(--pillar-org-aurora);
--accent-shadow: var(--shadow-glow-emerald);
}