/* Agrim AI — Global Stylesheet (flattened, self-contained) */ /* ===== tokens/fonts.css ===== */ /* ============================================================ AGRIM AI · WEBFONTS (v2) ------------------------------------------------------------ Hanken Grotesk (Latin display + body), Mukta (Devanagari pair), JetBrains Mono (code/timestamps). All from Google Fonts. Replace with self-hosted .woff2 when official Agrim font files are supplied. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=Mukta:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ===== tokens/colors.css ===== */ /* ============================================================ AGRIM AI · COLOR TOKENS (v2 — Ink / Paper / Signal) ------------------------------------------------------------ Apple-clean. Three colors do all the work: INK — Near-black. Text, primary buttons, dark surfaces. PAPER — Warm off-white. Page background. SIGNAL — Saffron-orange. The single brand accent. Used for links, secondary highlights, brand moments. India-warm without being literal. The logo gradient (violet → cobalt → teal) is preserved but RESERVED: it appears only inside the Agrim mark. Treat it as an heirloom, not a brand color. ============================================================ */ :root { /* ---- Heirloom: logo gradient stops (mark-only) ---- */ --logo-violet: #705FA6; --logo-cobalt: #5B90CC; --logo-teal: #008575; --logo-gradient: linear-gradient( 96deg, var(--logo-violet) 0%, var(--logo-cobalt) 48.52%, var(--logo-teal) 100% ); /* ---- INK (text, primary action, dark surfaces) ---- */ --ink-50: #F5F5F4; --ink-100: #E8E8E6; --ink-200: #D1D1CE; --ink-300: #ABABA6; --ink-400: #7A7A75; --ink-500: #4B4B47; --ink-600: #2E2E2B; --ink-700: #1C1D22; --ink-800: #13141A; --ink-900: #0E0F14; /* canonical ink */ --ink-950: #07080B; /* ---- PAPER (warm off-white surface family) ---- */ --paper-0: #FFFFFF; --paper-25: #FDFCF8; --paper-50: #FAFAF7; /* canonical paper */ --paper-100: #F4F3EE; --paper-200: #ECEAE2; --paper-300: #DAD7CC; /* ---- SIGNAL (marigold saffron — the one brand accent) ---- */ --signal-50: #FCEDE2; --signal-100: #FAD5BD; --signal-200: #F5AC7E; --signal-300: #F0844C; --signal-400: #EC6A2E; --signal-500: #E8521A; /* canonical signal · marigold */ --signal-600: #C24213; --signal-700: #9A330B; --signal-800: #6E2308; --signal-900: #4A1605; /* ---- Neutrals (warm gray — slight ink+paper blend) ---- */ --neutral-0: #FFFFFF; --neutral-25: var(--paper-25); --neutral-50: var(--paper-50); --neutral-100: #F1EFEA; --neutral-200: #E4E1DA; --neutral-300: #CDC9C0; --neutral-400: #9C988F; --neutral-500: #6D6A63; --neutral-600: #4E4B46; --neutral-700: #353331; --neutral-800: #1E1D1B; --neutral-900: var(--ink-900); /* ---- Semantic primitives (warm, not surgical) ---- */ --success-50: #E8F3EC; --success-500: #1F9D5B; --success-700: #0E6E3D; --warning-50: #FFF5DE; --warning-500: #E89A1A; --warning-700: #8C5C04; --danger-50: #FDEBEC; --danger-500: #D6394A; --danger-700: #97202D; --info-50: #EEF2FB; --info-500: #4F77C7; --info-700: #2A4D8F; /* ============================================================ SEMANTIC ALIASES — use these in components, not primitives ============================================================ */ /* Text */ --text-primary: var(--ink-900); --text-secondary: var(--ink-500); --text-tertiary: var(--ink-400); --text-disabled: var(--ink-300); --text-inverse: var(--paper-0); --text-brand: var(--signal-600); --text-link: var(--signal-600); --text-link-hover: var(--signal-700); --text-success: var(--success-700); --text-warning: var(--warning-700); --text-danger: var(--danger-700); /* Surfaces */ --surface-page: var(--paper-50); --surface-card: var(--paper-0); --surface-raised: var(--paper-0); --surface-sunken: var(--paper-100); --surface-muted: var(--paper-100); --surface-inverse: var(--ink-900); --surface-signal-soft: var(--signal-50); --surface-signal: var(--signal-500); /* Borders */ --border-subtle: var(--paper-200); --border-default: #DAD6CC; --border-strong: var(--neutral-400); --border-brand: var(--signal-500); --border-focus: var(--ink-900); --border-danger: var(--danger-500); /* Interactive — PRIMARY is INK (Apple/Wix discipline) */ --action-primary-bg: var(--ink-900); --action-primary-bg-hover: var(--ink-700); --action-primary-bg-active: var(--ink-950); --action-primary-fg: var(--paper-0); --action-secondary-bg: var(--paper-0); --action-secondary-bg-hover: var(--paper-50); --action-secondary-bg-active: var(--paper-100); --action-secondary-fg: var(--ink-900); --action-secondary-border: var(--ink-900); --action-ghost-bg-hover: var(--paper-100); --action-ghost-bg-active: var(--paper-200); --action-ghost-fg: var(--ink-700); /* Signal = the bold orange CTA (use sparingly — one per surface) */ --action-signal-bg: var(--signal-500); --action-signal-bg-hover: var(--signal-600); --action-signal-bg-active: var(--signal-700); --action-signal-fg: var(--paper-0); /* white on marigold — Nike-bold */ --action-danger-bg: var(--danger-500); --action-danger-bg-hover: var(--danger-700); --action-danger-fg: var(--paper-0); /* Focus ring — ink, sharp (no soft glow) */ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--ink-900) 18%, transparent); /* Chat — agent neutral, user signal-soft (warmer than v1) */ --chat-bubble-user-bg: var(--ink-900); --chat-bubble-user-fg: var(--paper-0); --chat-bubble-agent-bg: var(--paper-100); --chat-bubble-agent-fg: var(--ink-900); --chat-bubble-agent-border: var(--paper-200); } /* ===== tokens/typography.css ===== */ /* ============================================================ AGRIM AI · TYPOGRAPHY TOKENS (v2) ------------------------------------------------------------ Hanken Grotesk: modern geometric sans, Helvetica-adjacent but warmer. The bold weights (800/900) are tight and declarative — Nike-clean. Mukta is the Devanagari pair for Indian-language lockups. JetBrains Mono survives for code/timestamps. ============================================================ */ :root { /* ---- Font families ---- */ --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-deva: "Mukta", "Hanken Grotesk", ui-sans-serif, sans-serif; /* Devanagari pair */ --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* ---- Weights (Hanken goes from 100 to 900) ---- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* ---- Type scale ---- */ --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-4xl: 38px; --font-size-5xl: 52px; --font-size-6xl: 68px; --font-size-7xl: 88px; --font-size-8xl: 112px; /* ---- Line heights ---- */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ---- Letter spacing — tighter than v1 for display ---- */ --tracking-tightest: -0.045em; --tracking-tight: -0.03em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ============================================================ SEMANTIC TYPE ROLES ============================================================ */ /* Display — declarative, Nike-tight */ --display-1-size: clamp(56px, 8vw, 112px); --display-1-leading: var(--leading-tight); --display-1-weight: var(--font-weight-black); --display-1-tracking: var(--tracking-tightest); --display-2-size: clamp(42px, 5.5vw, 80px); --display-2-leading: var(--leading-tight); --display-2-weight: var(--font-weight-black); --display-2-tracking: var(--tracking-tightest); --display-3-size: clamp(32px, 4vw, 52px); --display-3-leading: var(--leading-tight); --display-3-weight: var(--font-weight-extrabold); --display-3-tracking: var(--tracking-tight); /* Headings */ --heading-1-size: 38px; --heading-1-leading: var(--leading-tight); --heading-1-weight: var(--font-weight-extrabold); --heading-1-tracking: var(--tracking-tight); --heading-2-size: 28px; --heading-2-leading: var(--leading-snug); --heading-2-weight: var(--font-weight-bold); --heading-2-tracking: var(--tracking-snug); --heading-3-size: 22px; --heading-3-leading: var(--leading-snug); --heading-3-weight: var(--font-weight-bold); --heading-3-tracking: var(--tracking-snug); --heading-4-size: 18px; --heading-4-leading: var(--leading-snug); --heading-4-weight: var(--font-weight-semibold); --heading-4-tracking: var(--tracking-snug); --heading-5-size: 16px; --heading-5-leading: var(--leading-snug); --heading-5-weight: var(--font-weight-semibold); --heading-5-tracking: var(--tracking-normal); /* Body */ --body-lg-size: 19px; --body-lg-leading: var(--leading-relaxed); --body-lg-weight: var(--font-weight-regular); --body-md-size: 15px; --body-md-leading: var(--leading-normal); --body-md-weight: var(--font-weight-regular); --body-sm-size: 13px; --body-sm-leading: var(--leading-normal); --body-sm-weight: var(--font-weight-regular); /* Eyebrow / overline / labels */ --eyebrow-size: 12px; --eyebrow-tracking: var(--tracking-wider); --eyebrow-weight: var(--font-weight-semibold); --label-size: 13px; --label-weight: var(--font-weight-medium); --caption-size: 12px; --caption-weight: var(--font-weight-regular); /* Mono */ --mono-size: 13px; --mono-leading: 1.55; } /* ===== tokens/spacing.css ===== */ /* ============================================================ AGRIM AI · SPACING TOKENS ------------------------------------------------------------ 4px-based scale. Most UI lives between space-2 (8px) and space-8 (32px); larger steps are for section rhythm. ============================================================ */ :root { --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* Semantic spacing roles */ --gutter-tight: var(--space-2); --gutter: var(--space-4); --gutter-loose: var(--space-6); --section-pad-y: var(--space-20); --section-pad-x: var(--space-6); /* Container widths */ --container-sm: 640px; --container-md: 864px; --container-lg: 1120px; --container-xl: 1280px; --container-2xl: 1440px; } /* ===== tokens/radii.css ===== */ /* ============================================================ AGRIM AI · RADII TOKENS (v2) ------------------------------------------------------------ Slightly lifted from v1. Apple/Wix lean larger on cards and modals; buttons stay restrained. ============================================================ */ :root { --radius-none: 0; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 28px; --radius-pill: 9999px; --radius-circle: 50%; /* Semantic roles */ --radius-button: var(--radius-lg); /* 12 */ --radius-input: var(--radius-lg); /* 12 */ --radius-card: var(--radius-xl); /* 16 */ --radius-modal: var(--radius-2xl); /* 20 */ --radius-chip: var(--radius-pill); --radius-bubble: 20px; } /* ===== tokens/shadows.css ===== */ /* ============================================================ AGRIM AI · SHADOW & ELEVATION TOKENS (v2) ------------------------------------------------------------ Quieter than v1. Apple-clean prefers a 1px hairline border over a heavy lift. Shadows are warm-tinted (ink, not blue). ============================================================ */ :root { --shadow-none: 0 0 #0000; /* Quiet elevation */ --shadow-xs: 0 1px 2px 0 rgba(14, 15, 20, 0.04); --shadow-sm: 0 1px 2px 0 rgba(14, 15, 20, 0.05), 0 1px 3px 0 rgba(14, 15, 20, 0.04); --shadow-md: 0 4px 10px -2px rgba(14, 15, 20, 0.06), 0 2px 4px -2px rgba(14, 15, 20, 0.04); --shadow-lg: 0 12px 28px -8px rgba(14, 15, 20, 0.10), 0 4px 8px -4px rgba(14, 15, 20, 0.05); --shadow-xl: 0 24px 56px -16px rgba(14, 15, 20, 0.14); --shadow-2xl: 0 36px 80px -20px rgba(14, 15, 20, 0.20); /* Focus ring — ink */ --shadow-focus: 0 0 0 3px rgba(14, 15, 20, 0.16); /* Inset for inputs */ --shadow-inset-xs: inset 0 1px 1px 0 rgba(14, 15, 20, 0.04); /* Widget float — warm-tinted */ --shadow-float: 0 24px 56px -16px rgba(20, 20, 14, 0.18), 0 8px 16px -6px rgba(20, 20, 14, 0.08); /* Semantic */ --elev-card: var(--shadow-sm); --elev-raised: var(--shadow-md); --elev-popover: var(--shadow-lg); --elev-modal: var(--shadow-xl); --elev-toast: var(--shadow-float); } /* ===== tokens/motion.css ===== */ /* ============================================================ AGRIM AI · MOTION TOKENS ------------------------------------------------------------ Calm, confident motion. No bounces. Hover/press are quick (120–160ms); panels and overlays are slightly slower with a soft ease-out. Reduced-motion respects user preference. ============================================================ */ :root { --duration-instant: 80ms; /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-normal: 180ms; /* @kind other */ --duration-slow: 280ms; /* @kind other */ --duration-slower: 420ms; /* @kind other */ --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1); /* @kind other */ --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1); /* @kind other */ --ease-in: cubic-bezier(0.4, 0.0, 1, 1); /* @kind other */ --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */ --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), fill var(--duration-fast) var(--ease-standard); --transition-default: var(--transition-colors), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 1ms; /* @kind other */ --duration-fast: 1ms; /* @kind other */ --duration-normal: 1ms; /* @kind other */ --duration-slow: 1ms; /* @kind other */ --duration-slower: 1ms; /* @kind other */ } } /* ===== tokens/base.css ===== */ /* ============================================================ AGRIM AI · BASE STYLES (v2) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--surface-page); font-feature-settings: "ss01", "cv11"; } button, input, select, textarea { font: inherit; color: inherit; } img, svg, video { display: block; max-width: 100%; } a { color: var(--text-link); text-decoration: none; transition: var(--transition-colors); } a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } ::selection { background: var(--signal-500); color: var(--paper-0); } /* ===== tokens/brand-period.css ===== */ /* ============================================================ AGRIM AI · BRAND PERIOD ------------------------------------------------------------ The marigold period at the end of a tagline is the brand's signature gesture. This file is its motion signature. Usage:

Every conversation counts.

Variants: [data-breath] — adds the slow ambient pulse AFTER the drop completes. Hero surfaces only. [data-on-ink] — reserved for future contrast tweaks (color stays signal-500 on both paper and ink today; the marigold reads on both). Motion: · Drop — 420ms, one-shot. Falls in + fades. Plays on load (covers above-the-fold + static export). · Breath — 3.2s, ease-in-out, infinite. Hero only, triggered by [data-breath]. Reduced motion: both animations collapse to "already there". ============================================================ */ .brand-period { display: inline-block; color: var(--signal-500); transform-origin: 50% 85%; will-change: transform, opacity; animation: brand-period-drop var(--duration-slower, 420ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) both; } .brand-period[data-breath] { animation: brand-period-drop var(--duration-slower, 420ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) both, brand-period-breath 3200ms ease-in-out 1000ms infinite; } @keyframes brand-period-drop { 0% { opacity: 0; transform: translateY(-0.55em); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes brand-period-breath { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.08); filter: brightness(1.1); } } @media (prefers-reduced-motion: reduce) { .brand-period, .brand-period[data-breath] { animation: none; opacity: 1; transform: none; } }