/** Shopify CDN: Minification failed Line 61:0 All "@import" rules must come first **/ /* ============================================================ CIRCLE FARMS — Brand Tokens for Shopify Field Almanac palette · teal-anchored · warm linen · editorial ------------------------------------------------------------ HOW TO USE ON SHOPIFY 1. Upload the four Hanken Grotesk .woff files + YoungSerif-Regular.ttf + HankenGrotesk-Italic-VariableFont_wght.ttf to your theme's /assets folder. 2. Either (a) paste this file into /assets as circle-farms-tokens.css and {{ 'circle-farms-tokens.css' | asset_url | stylesheet_tag }} in theme.liquid , OR (b) copy the :root block into your theme's main stylesheet. 3. If using Shopify asset_url for fonts, replace the url(...) paths in the @font-face blocks below with the Liquid form, e.g. src: url("{{ 'hanken-grotesk-latin-400-normal.woff' | asset_url }}") format("woff"); (A .css file can't run Liquid — rename to circle-farms-tokens.css.liquid if you want asset_url in the font paths, or hardcode the CDN URLs.) ============================================================ */ /* --- Body: Hanken Grotesk (self-hosted, four weights) --- */ @font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-400-normal.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-500-normal.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-600-normal.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-700-normal.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* Italic (variable) — used for .display-italic editorial moments */ @font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 400 700; font-style: italic; font-display: swap; } /* --- Display + wordmark: Young Serif (self-hosted) --- */ @font-face { font-family: "Young Serif"; src: url("fonts/YoungSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* --- Mono (optional, CDN — spec tables only) --- */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* === FOUNDATION — paper + ink ============================ */ --paper: #F4EFE6; /* linen — primary page background */ --paper-deep: #E9E2D4; /* deeper linen for tinted bands */ --ink: #1A1815; /* primary text — warm near-black */ --ink-soft: #4A4640; /* secondary text */ --ink-mute: #8A847A; /* tertiary, captions, meta */ /* === PRAIRIE TEAL — primary anchor ====================== */ --teal-50: #E8F0EE; --teal-100: #CCDEDA; --teal-300: #5E8B86; --teal-400: #1E5552; --teal-500: #0F3D3A; /* PRIMARY action / nav / headings */ --teal-600: #082A28; /* hover-dark */ /* === TERRA COTTA — accent for heirloom + limited drops == */ --terracotta-50: #FBEEE7; --terracotta-100: #F4D6C5; --terracotta-300: #DD8A6B; --terracotta-400: #C45A38; --terracotta-500: #A8492C; --terracotta-600: #883820; /* === JOY COLOURS — category accents ===================== */ --marigold-100: #F7E4C2; --marigold-300: #F1C878; --marigold: #E8A41C; --marigold-deep:#BA8012; /* herbs */ --chartreuse-100: #ECF2C6; --chartreuse-300: #DCE88A; --chartreuse-500: #CFE051; --chartreuse-deep:#9DAC30; /* vegetables */ --cornflower-100: #D9E4F1; --cornflower-300: #8FB1D7; --cornflower-500: #3D7CB7; --cornflower-deep:#2A5984; /* cover crops + info */ --raspberry-100: #F4D3DB; --raspberry-300: #DD8298; --raspberry-500: #C42E50; --raspberry-deep:#962039; /* secondary + warm editorial accent */ /* === SEMANTIC ROLES ===================================== */ --fg-1: var(--ink); --fg-2: var(--ink-soft); --fg-3: var(--ink-mute); --fg-inverse: var(--paper); --fg-accent: var(--raspberry-500); --fg-link: var(--teal-500); --bg-page: var(--paper); --bg-surface-1: #FFFFFF; /* white cards */ --bg-surface-2: var(--paper-deep); --bg-inverse: var(--teal-500); /* dark surfaces are teal, not black */ --line: #DBD7CC; --line-strong: #C2BCAE; --accent-primary: var(--teal-500); --accent-primary-hover: var(--teal-600); --accent-secondary: var(--raspberry-500); --success: var(--teal-500); --success-bg: var(--teal-50); --warning: var(--marigold); --warning-bg: var(--marigold-100); --danger: var(--raspberry-500); --danger-bg: var(--raspberry-100); --info: var(--cornflower-500);--info-bg: var(--cornflower-100); /* === TYPE =============================================== */ --font-display: "Young Serif", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-wordmark:"Young Serif", Georgia, serif; /* uppercase + letter-spaced */ --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 64px; --fs-5xl: 88px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-eyebrow: 0.14em; /* === SPACING (8pt) ===================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* === RADII ============================================= */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* === SHADOWS (sparing) ================================= */ --shadow-1: 0 4px 16px -6px rgba(26, 24, 21, 0.16); --shadow-2: 0 16px 48px -16px rgba(15, 61, 58, 0.22); --shadow-hover: 0 12px 32px -10px rgba(15, 61, 58, 0.18); /* === MOTION =========================================== */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --duration-fast: 120ms; --duration: 220ms; --duration-slow: 320ms; /* === LAYOUT =========================================== */ --container-max: 1200px; --container-narrow: 680px; }