/* * VarshaKrishi Design System — tokens.css * Single source of truth for all design tokens. * NO selectors. NO rules. ONLY :root custom properties. * All hex/rgb values in the entire project live here and nowhere else. * * Table of contents: * 1. Color — Background * 2. Color — Text * 3. Color — Brand / Accent * 4. Color — Semantic * 5. Color — Border * 6. Color — Overlay / Scrim * 7. Typography — Families * 8. Typography — Scale * 9. Typography — Leading (line-height) * 10. Typography — Tracking (letter-spacing) * 11. Typography — Weight * 12. Spacing * 13. Grid / Layout * 14. Border Radius * 15. Shadow * 16. Z-Index * 17. Animation */ :root { /* ───────────────────────────────────────────────────────────── * 1. COLOR — BACKGROUND HIERARCHY * Surfaces stack from darkest (base) to lightest (elevated). * Never use a surface color on a deeper surface. * ───────────────────────────────────────────────────────────── */ --color-bg-base: #080C08; /* Page background — deepest layer */ --color-bg-surface: #111711; /* Cards, panels, inset containers */ --color-bg-elevated: #1A201A; /* Tooltips, dropdowns, popovers */ --color-bg-overlay: #242C24; /* Borders used as background separators */ /* ───────────────────────────────────────────────────────────── * 2. COLOR — TEXT HIERARCHY * Contrast ratios verified against --color-bg-base (#080C08): * primary #F0F4F0 → 18.5:1 WCAG AAA * secondary #C4C9C4 → 12.1:1 WCAG AAA * muted #7A8A7A → 5.2:1 WCAG AA (use only for metadata/captions) * disabled #3D4D3D → 2.1:1 decorative only — never for readable text * inverse #080C08 → 5.8:1 on --color-brand-primary WCAG AA * ───────────────────────────────────────────────────────────── */ --color-text-primary: #F0F4F0; /* Headings, high-emphasis body copy */ --color-text-secondary: #C4C9C4; /* Body copy, descriptions, paragraph text */ --color-text-muted: #7A8A7A; /* Metadata, timestamps, captions, labels */ --color-text-disabled: #3D4D3D; /* Placeholder text, disabled UI states */ --color-text-inverse: #080C08; /* Text on amber/light backgrounds (buttons) */ /* ───────────────────────────────────────────────────────────── * 3. COLOR — BRAND / ACCENT * Primary brand color is amber (#C8830A) — used for CTAs, active * states, and highlights. Secondary is deep field green (#2D5438) * used for structural accents and status indicators. * ───────────────────────────────────────────────────────────── */ --color-brand-primary: #C8830A; /* Primary CTA buttons, active nav underline */ --color-brand-hover: #E8A020; /* Hover state for brand-primary elements */ --color-brand-muted: #6B4A12; /* Subtle brand borders, background tints */ --color-brand-secondary: #2D5438; /* Field green — secondary structural accent */ --color-brand-glow: rgba(200, 131, 10, 0.15); /* Box-shadow glow on CTAs */ --color-brand-glow-lg: rgba(200, 131, 10, 0.08); /* Wider ambient glow */ /* ───────────────────────────────────────────────────────────── * 4. COLOR — SEMANTIC * Used for status indicators, alerts, and form feedback. * Each semantic color has a background tint variant for alert panels. * ───────────────────────────────────────────────────────────── */ --color-success: #3AAF63; /* Operational status, positive confirmations */ --color-success-bg: rgba(58, 175, 99, 0.08); --color-success-border: rgba(58, 175, 99, 0.25); --color-warning: #C8830A; /* Pending states, in-progress indicators */ --color-warning-bg: rgba(200, 131, 10, 0.08); --color-warning-border: rgba(200, 131, 10, 0.25); --color-error: #E05252; /* Form validation errors, critical alerts */ --color-error-bg: rgba(224, 82, 82, 0.08); --color-error-border: rgba(224, 82, 82, 0.25); --color-info: #4A9EBF; /* Informational notices, neutral status */ --color-info-bg: rgba(74, 158, 191, 0.08); --color-info-border: rgba(74, 158, 191, 0.25); /* ───────────────────────────────────────────────────────────── * 5. COLOR — BORDER * Three levels of border emphasis. Use subtle for layout dividers, * default for card outlines, strong for focused/active states. * ───────────────────────────────────────────────────────────── */ --color-border-subtle: rgba(36, 44, 36, 0.6); /* Very light layout dividers */ --color-border-default: #242C24; /* Standard card and panel borders */ --color-border-strong: rgba(107, 74, 18, 0.5); /* Focus rings, active card borders */ /* ───────────────────────────────────────────────────────────── * 6. COLOR — OVERLAY / SCRIM * Used for modal backdrops, nav frosted glass, and drawer overlays. * ───────────────────────────────────────────────────────────── */ --color-scrim: rgba(8, 12, 8, 0.72); /* Modal backdrop */ --color-scrim-heavy: rgba(8, 12, 8, 0.92); /* Mobile drawer full-screen overlay */ --color-nav-bg: rgba(8, 12, 8, 0.88); /* Scrolled nav frosted glass */ --color-nav-bg-blur: blur(20px) saturate(150%); /* Backdrop filter for nav */ /* ───────────────────────────────────────────────────────────── * Additional overlay tints used in page-specific contexts * ───────────────────────────────────────────────────────────── */ --color-hero-overlay-radial: rgba(13, 31, 18, 0.65); /* Hero gradient overlay — deep field green tint */ --color-instruments-bg: rgba(17, 23, 17, 0.55); /* Hero instrument panel frosted glass */ /* ───────────────────────────────────────────────────────────── * 7. TYPOGRAPHY — FAMILIES * Instrument Sans: variable-width sans-serif with strong optical * sizing — chosen because it renders cleanly at small sizes in * monochrome dark UIs and has genuine institutional weight at * display sizes. Avoids the "startup" associations of Inter. * * DM Serif Display: high-contrast editorial serif used exclusively * for hero headlines and pull quotes. The italic cut creates visual * hierarchy without requiring color. Signals precision and authority. * * IBM Plex Mono: technical monospace for spec values, code, and * data readouts. IBM Plex has better optical balance at small sizes * than JetBrains Mono and is more neutral — appropriate for * institutional contexts where JetBrains reads as "developer tool." * ───────────────────────────────────────────────────────────── */ --font-display: 'DM Serif Display', 'Noto Sans Devanagari', Georgia, 'Times New Roman', serif; --font-body: 'Instrument Sans', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', Courier, monospace; /* ───────────────────────────────────────────────────────────── * 8. TYPOGRAPHY — SCALE * Ratio: 1.25 (Major Third) * Chosen over Perfect Fourth (1.333) because the site has dense * technical content — a tighter ratio keeps heading sizes * proportional without creating excessive visual jumps between * body text and section headings. Fluid clamp() values scale * smoothly between 375px (mobile min) and 1440px (desktop max). * * Base: 1rem = 16px * xs: 0.64rem (~10px) * sm: 0.8rem (~13px) * base: 1rem (16px) * lg: 1.25rem (20px) * xl: 1.563rem (25px) * 2xl: 1.953rem (31px) * 3xl: 2.441rem (39px) * 4xl: 3.052rem (49px) * 5xl: 3.815rem (61px) * 6xl: 4.768rem (76px) * 7xl: 5.96rem (95px) — hero display only * ───────────────────────────────────────────────────────────── */ --text-xs: clamp(0.64rem, 0.6rem + 0.2vw, 0.75rem); /* Labels, captions, mono metadata */ --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem); /* Secondary body, table cells */ --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem); /* Primary body copy */ --text-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* Lead paragraphs, intro text */ --text-xl: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); /* Card titles, sub-headings */ --text-2xl: clamp(1.3rem, 1.1rem + 0.75vw, 1.563rem); /* Section sub-headings */ --text-3xl: clamp(1.6rem, 1.3rem + 1.25vw, 2rem); /* H3 section headings */ --text-4xl: clamp(2rem, 1.5rem + 2vw, 2.5rem); /* H2 major section headings */ --text-5xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); /* H1 page headings */ --text-6xl: clamp(3rem, 2.5rem + 3vw, 4.5rem); /* Large display headings */ --text-7xl: clamp(3.5rem, 3rem + 4vw, 6rem); /* Hero display — homepage only */ /* ───────────────────────────────────────────────────────────── * 9. TYPOGRAPHY — LEADING (line-height) * ───────────────────────────────────────────────────────────── */ --leading-none: 1; /* Display headlines — tight optical fit */ --leading-tight: 1.15; /* Large headings (h1, h2) */ --leading-snug: 1.3; /* Medium headings (h3, h4) */ --leading-normal: 1.55; /* Body copy — comfortable reading */ --leading-relaxed: 1.75; /* Long-form article body text */ --leading-loose: 2; /* Spaced-out labels, metadata rows */ /* ───────────────────────────────────────────────────────────── * 10. TYPOGRAPHY — TRACKING (letter-spacing) * ───────────────────────────────────────────────────────────── */ --tracking-tight: -0.04em; /* Large display headings */ --tracking-snug: -0.02em; /* Section headings */ --tracking-normal: -0.01em; /* Body copy default */ --tracking-wide: 0.06em; /* Buttons, nav links */ --tracking-wider: 0.1em; /* Small caps labels */ --tracking-widest: 0.18em; /* Eyebrow labels, mono metadata */ /* ───────────────────────────────────────────────────────────── * 11. TYPOGRAPHY — WEIGHT * ───────────────────────────────────────────────────────────── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Maximum line length for body text — enforced on .prose containers */ --measure-body: 68ch; /* Optimal reading width for body copy */ --measure-narrow: 52ch; /* Narrow columns, captions */ --measure-wide: 80ch; /* Wide content blocks */ /* ───────────────────────────────────────────────────────────── * 12. SPACING * Base unit: 8px (0.5rem) * Chosen over 4px because the site targets desktop-first * institutional buyers — 8px increments produce more generous, * professional spacing without requiring half-unit values. * All margins, paddings, and gaps must use these tokens. * No arbitrary pixel values anywhere in the codebase. * * --space-1 = 8px * --space-2 = 16px * --space-3 = 24px * --space-4 = 32px * --space-5 = 40px * --space-6 = 48px * --space-7 = 56px * --space-8 = 64px * --space-10 = 80px * --space-12 = 96px * --space-16 = 128px * --space-20 = 160px * --space-24 = 192px * ───────────────────────────────────────────────────────────── */ --space-px: 1px; --space-0: 0; --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 2.5rem; /* 40px */ --space-6: 3rem; /* 48px */ --space-7: 3.5rem; /* 56px */ --space-8: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-12: 6rem; /* 96px */ --space-16: 8rem; /* 128px */ --space-20: 10rem; /* 160px */ --space-24: 12rem; /* 192px */ /* Fluid section padding — scales with viewport */ --space-section: clamp(4rem, 3rem + 4vw, 8rem); /* Standard section padding */ --space-section-lg: clamp(6rem, 4rem + 6vw, 12rem); /* Hero / large sections */ /* ───────────────────────────────────────────────────────────── * 13. GRID / LAYOUT * ───────────────────────────────────────────────────────────── */ --grid-max: 1280px; /* Max content width — narrower than 1440 for readability */ --grid-max-wide: 1440px; /* Full-bleed sections only */ --grid-max-narrow: 720px; /* Article body, legal pages */ --grid-gutter: clamp(1rem, 1rem + 1.5vw, 2rem); /* Column gap */ --grid-padding: clamp(1.25rem, 4vw, 3rem); /* Horizontal page padding */ /* Nav height — used for body padding-top and sticky offset calculations */ --nav-height: 72px; /* ───────────────────────────────────────────────────────────── * 14. BORDER RADIUS * ───────────────────────────────────────────────────────────── */ --radius-sm: 2px; /* Subtle rounding — badges, chips, code blocks */ --radius-md: 6px; /* Standard cards, inputs, buttons */ --radius-lg: 12px; /* Large cards, modals, drawers */ --radius-xl: 20px; /* Feature cards, hero panels */ --radius-full: 9999px; /* Pills, tags, toggle buttons */ /* ───────────────────────────────────────────────────────────── * 15. SHADOW * All shadows use dark-mode-appropriate values (dark base color). * --shadow-glow is amber-tinted for CTA buttons only. * ───────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 0 1px var(--color-brand-primary), 0 4px 20px var(--color-brand-glow), 0 0 40px var(--color-brand-glow-lg); --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* ───────────────────────────────────────────────────────────── * 16. Z-INDEX * Explicit stack — no magic numbers anywhere in the codebase. * ───────────────────────────────────────────────────────────── */ --z-base: 1; /* Default stacking context */ --z-raised: 10; /* Slightly elevated elements (card hover) */ --z-sticky: 100; /* Sticky elements (table headers) */ --z-overlay: 200; /* Overlays, dropdowns */ --z-modal: 1000; /* Modal dialogs */ --z-nav: 9000; /* Navigation — always on top */ --z-toast: 9999; /* Notifications, alerts */ /* ───────────────────────────────────────────────────────────── * 17. ANIMATION * All transitions reference these tokens. * --ease-out-expo: used for entrances (elements coming in) * --ease-in-expo: used for exits (elements going out) * --ease-spring: used for interactive feedback (button press, hover) * ───────────────────────────────────────────────────────────── */ --duration-instant: 80ms; /* Immediate feedback (cursor, active states) */ --duration-fast: 150ms; /* Hover states, color transitions */ --duration-base: 280ms; /* Standard transitions */ --duration-slow: 500ms; /* Larger motion (drawer open, modal) */ --duration-xslow: 800ms; /* Scroll-triggered reveals */ --ease-linear: linear; --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0.0, 1.0, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Smooth deceleration */ --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0); /* Sharp acceleration */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Slight overshoot */ }