/* Fair Farms design system — flattened production build. Source: styles.css + tokens/*.css */ /* ---- tokens/fonts.css ---- */ /* Webfonts. No licensed binaries were supplied, so families are served from Google Fonts. Swap for self-hosted @font-face when the foundry files arrive. */ /* webfont link moved to */ :root { --ff-font-display: "Newsreader", "Noto Serif Khmer", Georgia, serif; --ff-font-sans: "Archivo", "Kantumruy Pro", "Helvetica Neue", Arial, sans-serif; --ff-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --ff-font-khmer: "Kantumruy Pro", "Noto Sans Khmer", sans-serif; --ff-font-khmer-display: "Noto Serif Khmer", "Kantumruy Pro", serif; } /* ---- tokens/colors.css ---- */ /* Fair Farms colour system — "Kampot terroir". Base ramp first, semantic aliases second. Always consume the semantics in UI. */ :root { /* Ink — warm near-black, pulled from dried-pepper husk */ --ff-ink: #17140F; --ff-ink-2: #332E24; --ff-ink-3: #5C5545; --ff-ink-4: #8A8271; /* Paper — unbleached, never pure white */ --ff-paper: #F7F2E8; --ff-paper-2: #EFE7D8; --ff-paper-3: #E4D9C5; --ff-paper-4: #CBBBA0; --ff-card: #FFFDF8; /* Pepper — the primary. Sun-dried red Kampot berry. */ --ff-pepper: #A93425; --ff-pepper-hover: #8F2A1D; --ff-pepper-press: #781F15; --ff-pepper-tint: #F6E4DF; /* Earth + field secondaries */ --ff-laterite: #C4703A; --ff-laterite-tint: #F7E7DA; --ff-khaki: #8C8256; --ff-khaki-tint: #EDEADA; --ff-leaf: #46603A; --ff-leaf-tint: #E4EADD; --ff-sea: #245F58; --ff-sea-tint: #DDE9E6; --ff-gold: #B98829; --ff-gold-tint: #F7EBD2; /* ---- Semantic: text ---- */ --text-strong: var(--ff-ink); --text-body: var(--ff-ink-2); --text-muted: var(--ff-ink-3); --text-meta: var(--ff-ink-4); --text-inverse: var(--ff-paper); --text-link: var(--ff-sea); --text-link-hover: var(--ff-ink); --text-accent: var(--ff-pepper); /* ---- Semantic: surface ---- */ --surface-page: var(--ff-paper); --surface-card: var(--ff-card); --surface-sunken: var(--ff-paper-2); --surface-inverse: var(--ff-ink); --surface-accent: var(--ff-pepper); --surface-accent-soft: var(--ff-pepper-tint); --surface-overlay: rgba(23, 20, 15, 0.62); /* ---- Semantic: line ---- */ --border-hairline: var(--ff-paper-3); --border-strong: var(--ff-paper-4); --border-inverse: rgba(247, 242, 232, 0.22); --border-focus: var(--ff-sea); /* ---- Semantic: action ---- */ --action-primary-bg: var(--ff-pepper); --action-primary-fg: #FFF9F2; --action-primary-bg-hover: var(--ff-pepper-hover); --action-primary-bg-press: var(--ff-pepper-press); --action-secondary-bg: transparent; --action-secondary-fg: var(--ff-ink); --action-secondary-border: var(--ff-ink); --action-secondary-bg-hover: rgba(23, 20, 15, 0.06); --action-ghost-fg: var(--ff-ink-2); --action-ghost-bg-hover: rgba(23, 20, 15, 0.05); --action-disabled-bg: var(--ff-paper-2); --action-disabled-fg: var(--ff-ink-4); /* ---- Semantic: status + certification ---- */ --status-organic: var(--ff-leaf); --status-organic-soft: var(--ff-leaf-tint); --status-fair: var(--ff-laterite); --status-fair-soft: var(--ff-laterite-tint); --status-info: var(--ff-sea); --status-info-soft: var(--ff-sea-tint); --status-warning: var(--ff-gold); --status-warning-soft: var(--ff-gold-tint); --status-danger: var(--ff-pepper); --status-danger-soft: var(--ff-pepper-tint); } /* Ink surfaces (footers, cover sections, app headers). Scope, don't invert globally. */ :root .ff-on-ink { --text-strong: var(--ff-paper); --text-body: rgba(247, 242, 232, 0.86); --text-muted: rgba(247, 242, 232, 0.66); --text-meta: rgba(247, 242, 232, 0.52); --text-link: var(--ff-paper); --surface-page: var(--ff-ink); --surface-card: #211C15; --surface-sunken: #100E0A; --border-hairline: rgba(247, 242, 232, 0.16); --border-strong: rgba(247, 242, 232, 0.3); --action-secondary-fg: var(--ff-paper); --action-secondary-border: rgba(247, 242, 232, 0.4); --action-secondary-bg-hover: rgba(247, 242, 232, 0.08); --action-ghost-fg: rgba(247, 242, 232, 0.86); --action-ghost-bg-hover: rgba(247, 242, 232, 0.08); } /* ---- tokens/typography.css ---- */ /* Type scale. Display = Newsreader (editorial serif), UI = Archivo, data + lot codes = IBM Plex Mono. One step per role; do not interpolate. */ :root { --ff-display-1-size: 64px; --ff-display-1-lh: 1.04; --ff-display-1-ls: -0.022em; --ff-display-2-size: 48px; --ff-display-2-lh: 1.08; --ff-display-2-ls: -0.018em; --ff-display-3-size: 36px; --ff-display-3-lh: 1.14; --ff-display-3-ls: -0.014em; --ff-title-1-size: 28px; --ff-title-1-lh: 1.24; --ff-title-1-ls: -0.01em; --ff-title-2-size: 22px; --ff-title-2-lh: 1.3; --ff-title-2-ls: -0.006em; --ff-title-3-size: 18px; --ff-title-3-lh: 1.38; --ff-title-3-ls: 0; --ff-body-lg-size: 18px; --ff-body-lg-lh: 1.62; --ff-body-size: 16px; --ff-body-lh: 1.65; --ff-body-sm-size: 14px; --ff-body-sm-lh: 1.58; --ff-label-size: 12px; --ff-label-lh: 1.2; --ff-label-ls: 0.1em; --ff-meta-size: 12px; --ff-meta-lh: 1.45; --ff-mono-size: 13px; --ff-mono-lh: 1.5; --ff-mono-ls: 0.01em; --ff-weight-regular: 400; --ff-weight-medium: 500; --ff-weight-semibold: 600; --ff-weight-bold: 700; /* Composed roles */ --type-display-1: var(--ff-weight-regular) var(--ff-display-1-size)/var(--ff-display-1-lh) var(--ff-font-display); --type-display-2: var(--ff-weight-regular) var(--ff-display-2-size)/var(--ff-display-2-lh) var(--ff-font-display); --type-display-3: var(--ff-weight-regular) var(--ff-display-3-size)/var(--ff-display-3-lh) var(--ff-font-display); --type-title-1: var(--ff-weight-medium) var(--ff-title-1-size)/var(--ff-title-1-lh) var(--ff-font-display); --type-title-2: var(--ff-weight-semibold) var(--ff-title-2-size)/var(--ff-title-2-lh) var(--ff-font-sans); --type-title-3: var(--ff-weight-semibold) var(--ff-title-3-size)/var(--ff-title-3-lh) var(--ff-font-sans); --type-body-lg: var(--ff-weight-regular) var(--ff-body-lg-size)/var(--ff-body-lg-lh) var(--ff-font-sans); --type-body: var(--ff-weight-regular) var(--ff-body-size)/var(--ff-body-lh) var(--ff-font-sans); --type-body-sm: var(--ff-weight-regular) var(--ff-body-sm-size)/var(--ff-body-sm-lh) var(--ff-font-sans); --type-label: var(--ff-weight-semibold) var(--ff-label-size)/var(--ff-label-lh) var(--ff-font-sans); --type-meta: var(--ff-weight-regular) var(--ff-meta-size)/var(--ff-meta-lh) var(--ff-font-sans); --type-mono: var(--ff-weight-medium) var(--ff-mono-size)/var(--ff-mono-lh) var(--ff-font-mono); } /* ---- tokens/spacing.css ---- */ /* 4px base grid. Layout containers and radii live here too. */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; --radius-seal: 50%; --container: 1200px; --container-wide: 1360px; --container-text: 68ch; --gutter: 24px; --gutter-sm: 16px; --grid-columns: 12; --bp-sm: 640px; --bp-md: 900px; --bp-lg: 1200px; --bp-xl: 1440px; --control-h-sm: 32px; --control-h: 40px; --control-h-lg: 48px; --tap-min: 44px; } /* ---- tokens/effects.css ---- */ /* Fair Farms leads with hairlines, not shadows. Shadows are warm and shallow. */ :root { --shadow-1: 0 1px 2px rgba(23, 20, 15, 0.06); --shadow-2: 0 2px 10px rgba(23, 20, 15, 0.08); --shadow-3: 0 18px 44px -14px rgba(23, 20, 15, 0.28); --shadow-inset-hairline: inset 0 0 0 1px var(--border-hairline); --rule: 1px solid var(--border-hairline); --rule-strong: 1px solid var(--border-strong); --rule-accent: 2px solid var(--ff-pepper); --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--border-focus); --blur-sticky: saturate(1.1) blur(10px); /* Photography grade: apply to every image so mixed sources feel like one shoot. */ --image-grade: saturate(0.94) contrast(1.04) brightness(1.01) sepia(0.05); /* Hatch fill — stands in for photography before assets exist, and works as a quiet texture behind data panels. */ --hatch: repeating-linear-gradient(135deg, var(--ff-paper-2) 0 6px, var(--ff-paper) 6px 12px); --hatch-ink: repeating-linear-gradient(135deg, rgba(23,20,15,0.08) 0 6px, rgba(23,20,15,0) 6px 12px); } /* ---- tokens/motion.css ---- */ /* Motion is agricultural: steady, unhurried, no bounce, no parallax. */ :root { --dur-instant: 90ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 340ms; --dur-page: 480ms; --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.5, 0, 0.9, 0.3); --transition-control: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); --transition-surface: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-page: 0ms; } }