/* ============================================================================ * Farmonx Design Tokens — v77.0 (foundation, non-breaking) * * Sets up modern color/spacing/typography vars based on the "Claude" theme * neutrals + Farmonx's existing brand red (#8B0000) as primary. Legacy * variables (`--brand-primary`, `--apple-blue`, `--accent-gold`, etc.) are * KEPT and aliased to new tokens so existing styles continue to render * unchanged. New components built in Stage 3 will reference --color-* and * --space-* directly. * * Load order (in ): * 1. design-tokens.css ← THIS FILE — must be first to set vars * 2. style.css ← legacy * 3. messenger.css ← legacy + new (gradual migration) * 4. ... * * Toggle dark mode by setting `` (auto for OS pref). * ========================================================================== */ :root { /* ─── BRAND COLORS (Farmonx red preserved) ──────────────────────── */ --color-brand-50: #fdf2f2; --color-brand-100: #fce7e7; --color-brand-200: #f9d1d1; --color-brand-300: #f4abab; --color-brand-400: #ec7878; --color-brand-500: #df4f4f; --color-brand-600: #c93333; /* hover for primary */ --color-brand-700: #a32424; --color-brand-800: #8B0000; /* PRIMARY — current brand red */ --color-brand-900: #6e0000; --color-brand-950: #3d0000; /* ─── NEUTRAL PALETTE (warm, from Claude theme) ───────────────────── */ --color-bg: #faf9f5; /* warm off-white, easier on eyes than #fff */ --color-bg-elevated: #ffffff; /* cards, modals — pure white pop */ --color-fg: #3d3929; /* deep brown text — better than #000 */ --color-fg-muted: #83827d; /* secondary text, captions */ --color-fg-subtle: #b4b2a7; /* placeholder, disabled */ --color-card: #ffffff; --color-card-fg: #141413; --color-card-border: #dad9d4; --color-popover: #ffffff; --color-popover-fg: #28261b; --color-muted: #ede9de; /* subtle backgrounds */ --color-muted-fg: #83827d; --color-accent: #e9e6dc; /* hover states, focus bg */ --color-accent-fg: #28261b; --color-border: #dad9d4; --color-input: #b4b2a7; --color-ring: var(--color-brand-800); /* focus ring = brand */ /* ─── SEMANTIC COLORS ─────────────────────────────────────────────── */ --color-primary: var(--color-brand-800); /* #8B0000 */ --color-primary-fg: #ffffff; --color-primary-hover: var(--color-brand-700); --color-secondary: #e9e6dc; --color-secondary-fg: #535146; --color-secondary-hover: #ddd9c9; --color-success: #16a34a; --color-success-fg: #ffffff; --color-success-bg: #dcfce7; --color-warning: #f59e0b; --color-warning-fg: #422006; --color-warning-bg: #fef3c7; --color-danger: #dc2626; --color-danger-fg: #ffffff; --color-danger-bg: #fee2e2; --color-info: #2563eb; --color-info-fg: #ffffff; --color-info-bg: #dbeafe; /* ─── CHART / DATA-VIZ ─────────────────────────────────────────────── */ --color-chart-1: #8B0000; /* brand */ --color-chart-2: #c96442; /* warm orange */ --color-chart-3: #d4af37; /* gold (was --accent-gold) */ --color-chart-4: #2563eb; /* blue */ --color-chart-5: #16a34a; /* green */ /* ─── SIDEBAR (sidebar variants for Stage 3 sidebar component) ────── */ --color-sidebar-bg: #f5f4ee; --color-sidebar-fg: #3d3d3a; --color-sidebar-primary: var(--color-brand-800); --color-sidebar-primary-fg:#fbfbfb; --color-sidebar-accent: #e9e6dc; --color-sidebar-accent-fg:#343434; --color-sidebar-border: #ebebeb; /* ─── SPACING SCALE (4-pt grid) ───────────────────────────────────── */ --space-0: 0; --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 */ /* ─── BORDER RADIUS ───────────────────────────────────────────────── */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px — default, was --radius */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px — cards, modals */ --radius-2xl: 1.5rem; /* 24px — bottom sheet */ --radius-full: 9999px; /* pills, avatars */ /* ─── TYPOGRAPHY ──────────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px — body */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── SHADOWS (refined, from Claude/Tailwind) ─────────────────────── */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.06); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.20); /* ─── ANIMATION ───────────────────────────────────────────────────── */ --duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 250ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* ─── LEGACY ALIASES (so existing CSS keeps working) ──────────────── */ /* style.css originals — just point to new tokens */ --primary-dark: var(--color-fg); --primary-darker: #0d0d0d; --accent-gold: var(--color-chart-3); --accent-gold-hover: #c9a227; --bg-light: var(--color-muted); --bg-white: var(--color-bg-elevated); --text-dark: var(--color-fg); --text-muted: var(--color-fg-muted); --border-color: var(--color-border); --success: var(--color-success); --warning: var(--color-warning); --danger: var(--color-danger); --info: var(--color-info); --shadow: var(--shadow-md); --radius: var(--radius-md); /* --radius-lg already aliased above */ /* apple-hig.css originals — keep blue/red for Apple-style components */ --apple-blue: #007AFF; /* preserved — used in lots of stat icons */ --apple-blue-dark: #0055D4; --apple-red: var(--color-danger); --system-blue: var(--apple-blue); --system-red: var(--color-danger); /* messenger.css uses #3390EC (Telegram blue) — keep but expose */ --color-messenger-accent: #3390EC; --color-messenger-mine: #EFFDDE; /* outgoing bubble green */ --color-messenger-theirs: #FFFFFF; /* incoming bubble white */ } /* ============================================================================ * DARK MODE — `` or @media (prefers-color-scheme: dark) * ========================================================================== */ [data-theme="dark"] { --color-bg: #262624; --color-bg-elevated: #30302e; --color-fg: #c3c0b6; --color-fg-muted: #b7b5a9; --color-fg-subtle: #83827d; --color-card: #262624; --color-card-fg: #faf9f5; --color-card-border: #3e3e38; --color-popover: #30302e; --color-popover-fg: #e5e5e2; --color-muted: #1b1b19; --color-muted-fg: #b7b5a9; --color-accent: #1a1915; --color-accent-fg: #f5f4ee; --color-border: #3e3e38; --color-input: #52514a; /* Brand stays vivid in dark — slightly brighter for contrast */ --color-primary: var(--color-brand-700); --color-primary-hover: var(--color-brand-600); --color-secondary: #faf9f5; --color-secondary-fg: #30302e; --color-sidebar-bg: #1f1e1d; --color-sidebar-fg: #c3c0b6; --color-sidebar-accent: #0f0f0e; --color-sidebar-accent-fg:#c3c0b6; /* Apple compat in dark */ --apple-blue: #0A84FF; --bg-light: #1b1b19; --bg-white: #30302e; --text-dark: var(--color-fg); --text-muted: var(--color-fg-muted); --border-color: var(--color-border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Apply dark vars when OS is dark and user hasn't explicitly chosen light */ --color-bg: #262624; --color-bg-elevated: #30302e; --color-fg: #c3c0b6; --color-fg-muted: #b7b5a9; --color-card: #262624; --color-card-border: #3e3e38; --color-popover: #30302e; --color-muted: #1b1b19; --color-accent: #1a1915; --color-border: #3e3e38; --color-sidebar-bg: #1f1e1d; --color-sidebar-fg: #c3c0b6; } } /* ============================================================================ * UTILITY HELPERS — for new Stage 3 components only. * Do NOT use these classes in legacy code yet — keep concerns separated. * ========================================================================== */ .bg-background { background-color: var(--color-bg); } .bg-card { background-color: var(--color-card); } .bg-muted { background-color: var(--color-muted); } .bg-primary { background-color: var(--color-primary); } .bg-accent { background-color: var(--color-accent); } .text-foreground { color: var(--color-fg); } .text-muted-fg { color: var(--color-fg-muted); } .text-primary { color: var(--color-primary); } .text-card-fg { color: var(--color-card-fg); } .border-default { border: 1px solid var(--color-border); } .border-input { border: 1px solid var(--color-input); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } /* ============================================================================ * SUBTLE GLOBAL UPGRADES — applied to body to immediately benefit ALL pages * without per-page rewrites. Reversible by removing this block. * ========================================================================== */ body { /* Replace harsh #fff background with warm off-white — much easier on eyes on Retina/4K monitors. Keeps existing white cards via .bg-white that still renders pure white, so cards "pop" properly. */ background-color: var(--color-bg); color: var(--color-fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Better focus rings — accessibility + brand consistency */ :focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; } /* Smoother default transitions — feels modern */ button, a, input, select, textarea { transition: background-color var(--duration-normal) var(--ease), border-color var(--duration-normal) var(--ease), color var(--duration-normal) var(--ease); } /* Selection color matches brand */ ::selection { background: var(--color-brand-200); color: var(--color-brand-900); } [data-theme="dark"] ::selection { background: var(--color-brand-700); color: var(--color-brand-50); }