/* ========================================================================= * TripuraPulse — Design Tokens * ------------------------------------------------------------------------- * Global tokens live on :root. Each design system then overrides the * palette variables inside `[data-ds="..."]` (the attribute is emitted on * the element). Switching systems is a single attribute swap — * content and markup never change. * ========================================================================= */ :root { /* --- Spacing scale ---------------------------------------------------- */ --tp-space-1: 0.25rem; --tp-space-2: 0.5rem; --tp-space-3: 0.75rem; --tp-space-4: 1rem; --tp-space-5: 1.5rem; --tp-space-6: 2rem; --tp-space-7: 3rem; --tp-space-8: 4rem; --tp-space-9: 6rem; --tp-gutter: clamp(1rem, 4vw, 2.5rem); /* --- Radii ------------------------------------------------------------ */ --tp-radius-s: 4px; --tp-radius-m: 10px; --tp-radius-l: 18px; --tp-radius-pill: 999px; /* --- Motion ----------------------------------------------------------- */ --tp-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --tp-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --tp-dur: 240ms; --tp-dur-slow: 640ms; /* --- Elevation -------------------------------------------------------- */ --tp-z-base: 1; --tp-z-float: 100; --tp-z-nav: 500; --tp-z-overlay: 900; --tp-z-modal: 1000; --tp-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12); --tp-shadow-2: 0 6px 18px rgba(0, 0, 0, 0.14); --tp-shadow-3: 0 16px 48px rgba(0, 0, 0, 0.2); --tp-shadow-glow: 0 0 0 1px var(--tp-highlight), 0 8px 32px color-mix(in srgb, var(--tp-highlight) 35%, transparent); /* --- Typography (per-system pairing; defaults = Chrono-Stream) --------- */ --tp-font-display: "Playfair Display", Georgia, "Times New Roman", serif; --tp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --tp-font-accent: "Inter", system-ui, sans-serif; --tp-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --tp-h1: clamp(2rem, 5.5vw, 4.5rem); --tp-h2: clamp(1.5rem, 3.5vw, 2.75rem); --tp-h3: clamp(1.15rem, 2vw, 1.6rem); --tp-h4: 1.1rem; --tp-lead: clamp(1.1rem, 2vw, 1.35rem); --tp-body: 1.0625rem; --tp-small: 0.875rem; --tp-micro: 0.75rem; --tp-lh-tight: 1.15; --tp-lh-body: 1.7; /* --- Layout ----------------------------------------------------------- */ --tp-container: 1280px; --tp-container-narrow: 760px; --tp-header-h: 72px; } /* ========================================================================= * DESIGN SYSTEM — Chrono-Stream * Deep forest green, warm off-white, muted terracotta. Journalistic, * calm authority. (Default — duplicated onto :root above implicitly.) * ========================================================================= */ [data-ds="chrono-stream"] { --tp-bg: #f4efe6; --tp-bg-alt: #ebe2d1; --tp-surface: #fffdf7; --tp-surface-alt: #f1eadb; --tp-text: #1d2b26; --tp-text-soft: #4d5c56; --tp-text-faint: #8a9791; --tp-line: #d9cfbc; --tp-accent: #0e3b2e; --tp-accent-strong: #08241c; --tp-accent-soft: #4c7c5f; --tp-highlight: #c46a4a; --tp-on-accent: #ffffff; --tp-on-highlight: #ffffff; --tp-hero-overlay: linear-gradient(180deg, rgba(8, 36, 28, 0) 0%, rgba(8, 36, 28, 0.72) 100%); --tp-font-display: "Playfair Display", Georgia, serif; --tp-font-body: "Inter", system-ui, sans-serif; --tp-font-accent: "Inter", system-ui, sans-serif; --tp-radius-s: 2px; --tp-radius-m: 6px; --tp-radius-l: 12px; --tp-shadow-1: 0 1px 2px rgba(29, 43, 38, 0.1); --tp-shadow-2: 0 10px 30px rgba(29, 43, 38, 0.12); --tp-shadow-3: 0 24px 60px rgba(8, 36, 28, 0.22); } /* ========================================================================= * DESIGN SYSTEM — Grid-Pulse * Electric teal, deep indigo, sharp yellow. High contrast kinetic mosaic. * ========================================================================= */ [data-ds="grid-pulse"] { --tp-bg: #f4f7f7; --tp-bg-alt: #e4ecec; --tp-surface: #ffffff; --tp-surface-alt: #ecf2f2; --tp-text: #101728; --tp-text-soft: #46506a; --tp-text-faint: #818ba6; --tp-line: #d5dee3; --tp-accent: #0d9488; --tp-accent-strong: #0b6e66; --tp-accent-soft: #2dd4bf; --tp-highlight: #facc15; --tp-on-accent: #ffffff; --tp-on-highlight: #101728; --tp-hero-overlay: linear-gradient(180deg, rgba(16, 23, 40, 0) 0%, rgba(16, 23, 40, 0.78) 100%); --tp-font-display: "Space Grotesk", "Inter", sans-serif; --tp-font-body: "Inter", system-ui, sans-serif; --tp-font-accent: "Space Grotesk", "Inter", sans-serif; --tp-radius-s: 6px; --tp-radius-m: 14px; --tp-radius-l: 22px; --tp-shadow-1: 0 2px 6px rgba(16, 23, 40, 0.08); --tp-shadow-2: 0 10px 30px rgba(16, 23, 40, 0.14); --tp-shadow-3: 0 20px 60px rgba(13, 148, 136, 0.28); --tp-shadow-glow: 0 0 0 1px var(--tp-accent), 0 12px 40px color-mix(in srgb, var(--tp-accent) 40%, transparent); } /* ========================================================================= * DESIGN SYSTEM — Editorial-Noir * Near-black, pure white, deep blood red, film grain. Cinematic prestige. * ========================================================================= */ [data-ds="editorial-noir"] { --tp-bg: #0a0a0a; --tp-bg-alt: #101010; --tp-surface: #141414; --tp-surface-alt: #1c1c1c; --tp-text: #f5f2ec; --tp-text-soft: #b9b4ab; --tp-text-faint: #6f6a63; --tp-line: #2a2a2a; --tp-accent: #8f1d1d; --tp-accent-strong: #6b1212; --tp-accent-soft: #c2392f; --tp-highlight: #c2392f; --tp-on-accent: #ffffff; --tp-on-highlight: #ffffff; --tp-hero-overlay: linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.9) 100%); --tp-font-display: "Oswald", "Arial Narrow", sans-serif; --tp-font-body: "Fraunces", Georgia, serif; --tp-font-accent: "Oswald", "Arial Narrow", sans-serif; --tp-radius-s: 0; --tp-radius-m: 0; --tp-radius-l: 0; --tp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6); --tp-shadow-2: 0 12px 36px rgba(0, 0, 0, 0.6); --tp-shadow-3: 0 30px 80px rgba(0, 0, 0, 0.7); --tp-shadow-glow: 0 0 0 1px var(--tp-highlight), 0 8px 40px rgba(194, 57, 47, 0.35); } /* ========================================================================= * DESIGN SYSTEM — Tripura-River * Soft aqua, deep river blue, sandy beige, moss green. Organic and fluid. * ========================================================================= */ [data-ds="tripura-river"] { --tp-bg: #e8f1f2; --tp-bg-alt: #d6e6e8; --tp-surface: #f6fbfa; --tp-surface-alt: #e3f0ef; --tp-text: #15333b; --tp-text-soft: #3f5c64; --tp-text-faint: #79949b; --tp-line: #c3d9db; --tp-accent: #1e5f74; --tp-accent-strong: #13414f; --tp-accent-soft: #4f93a8; --tp-highlight: #d9c7a7; --tp-on-accent: #ffffff; --tp-on-highlight: #15333b; --tp-hero-overlay: linear-gradient(180deg, rgba(21, 51, 59, 0) 0%, rgba(21, 51, 59, 0.7) 100%); --tp-font-display: "Nunito", "Inter", sans-serif; --tp-font-body: "Nunito", "Inter", sans-serif; --tp-font-accent: "Dancing Script", cursive; --tp-radius-s: 12px; --tp-radius-m: 24px; --tp-radius-l: 36px; --tp-shadow-1: 0 2px 8px rgba(21, 51, 59, 0.1); --tp-shadow-2: 0 12px 32px rgba(21, 51, 59, 0.14); --tp-shadow-3: 0 28px 70px rgba(21, 51, 59, 0.2); } /* ========================================================================= * DESIGN SYSTEM — Pulse-Cards * Clean white/gray base, strong category accents, app-like bento. * ========================================================================= */ [data-ds="pulse-cards"] { --tp-bg: #f2f4f7; --tp-bg-alt: #e7eaf0; --tp-surface: #ffffff; --tp-surface-alt: #f7f8fb; --tp-text: #171b26; --tp-text-soft: #4a5266; --tp-text-faint: #8a92a6; --tp-line: #e2e6ee; --tp-accent: #2563eb; --tp-accent-strong: #1d4ed8; --tp-accent-soft: #60a5fa; --tp-highlight: #7c3aed; --tp-on-accent: #ffffff; --tp-on-highlight: #ffffff; --tp-hero-overlay: linear-gradient(180deg, rgba(23, 27, 38, 0) 0%, rgba(23, 27, 38, 0.66) 100%); --tp-font-display: "Inter", system-ui, sans-serif; --tp-font-body: "Inter", system-ui, sans-serif; --tp-font-accent: "Inter", system-ui, sans-serif; --tp-radius-s: 8px; --tp-radius-m: 16px; --tp-radius-l: 24px; --tp-shadow-1: 0 1px 3px rgba(23, 27, 38, 0.08); --tp-shadow-2: 0 8px 24px rgba(23, 27, 38, 0.1); --tp-shadow-3: 0 20px 56px rgba(23, 27, 38, 0.16); } /* ------------------------------------------------------------------------- * Dark mode (all systems via prefers-color-scheme fallback — systems also * expose their own .tp-dark-mode toggle class for the Command Center). * ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-ds]) { --tp-bg: #101613; --tp-bg-alt: #0a0f0d; --tp-surface: #18211d; --tp-text: #eef3ef; --tp-text-soft: #b7c4bc; --tp-text-faint: #75857c; --tp-line: #2a3730; } }