/* ============================================================ TipSharks Design Tokens — CSS Custom Properties Source of truth: design-tokens.json Generated: 2026-05-06 ============================================================ Usage: Import this file in any web project. Dark mode is activated via [data-theme="dark"] on a parent element (typically or ). ============================================================ */ :root { /* ---- Brand Colors ---- */ --ts-color-brand-navy: #0f172a; --ts-color-brand-cyan: #06b6d4; --ts-color-brand-navyLight: #1e293b; /* ---- Semantic Colors ---- */ --ts-color-semantic-success: #22c55e; --ts-color-semantic-warning: #eab308; --ts-color-semantic-danger: #dc2626; --ts-color-semantic-info: #3b82f6; /* ---- Text Colors ---- */ --ts-color-text-primary: #111827; --ts-color-text-secondary: #6b7280; --ts-color-text-inverse: #f9fafb; /* ---- Background Colors ---- */ --ts-color-background-light: #f9fafb; --ts-color-background-dark: #0f172a; --ts-color-background-card: #ffffff; --ts-color-background-cardDark: #1e293b; /* ---- Spacing ---- */ --ts-spacing-xs: 4px; --ts-spacing-sm: 8px; --ts-spacing-md: 16px; --ts-spacing-lg: 24px; --ts-spacing-xl: 32px; --ts-spacing-2xl: 48px; /* ---- Border Radius ---- */ --ts-radius-sm: 4px; --ts-radius-md: 8px; --ts-radius-lg: 12px; --ts-radius-xl: 16px; --ts-radius-full: 9999px; /* ---- Typography ---- */ --ts-font-sans: system-ui, -apple-system, sans-serif; --ts-font-mono: ui-monospace, monospace; --ts-fontSize-xs: 12px; --ts-fontSize-sm: 14px; --ts-fontSize-base: 16px; --ts-fontSize-lg: 18px; --ts-fontSize-xl: 20px; --ts-fontSize-2xl: 24px; --ts-fontSize-3xl: 30px; /* ---- Light Mode Defaults ---- */ --ts-color-background: var(--ts-color-background-light); --ts-color-background-card-default: var(--ts-color-background-card); --ts-color-text-default: var(--ts-color-text-primary); } /* ---- Dark Mode ---- */ [data-theme="dark"] { --ts-color-background: var(--ts-color-background-dark); --ts-color-background-card-default: var(--ts-color-background-cardDark); --ts-color-text-default: var(--ts-color-text-inverse); } /* ---- Utility Classes ---- */ .ts-bg-brand { background-color: var(--ts-color-brand-navy); } .ts-bg-cyan { background-color: var(--ts-color-brand-cyan); } .ts-text-inverse { color: var(--ts-color-text-inverse); } .ts-text-primary { color: var(--ts-color-text-default); } .ts-text-secondary { color: var(--ts-color-text-secondary); } .ts-card { background-color: var(--ts-color-background-card-default); border-radius: var(--ts-radius-md); padding: var(--ts-spacing-md); }