/* ============================================================
SATOCROP SEEDS — Colors & Type Foundation
Streetwear-luxury cultivation. Honey, pollen, rosin, indica.
============================================================ */
/* ---- Fonts -------------------------------------------------
Clash Display + Satoshi via Fontshare; Bungee via Google.
Load these in HTML :
------------------------------------------------------------ */
:root {
/* ---------- RAW PALETTE ---------- */
/* Rosin darks — warm near-black bases with brown/amber undertone */
--rosin-950: #0E0A05; /* deepest background */
--rosin-900: #15100A; /* page background */
--rosin-850: #1C1610; /* raised surface */
--rosin-800: #251C12; /* panel base */
--rosin-700: #33271A; /* hairline / divider on dark */
/* Honey & amber — primary warm spectrum */
--amber-700: #6E3F0E; /* deep rosin amber */
--amber-600: #8A5212; /* rosin amber */
--amber-500: #C9821F; /* amber */
--gold-400: #F0A92B; /* HONEY GOLD — primary brand */
--gold-300: #FFC857; /* pollen gold */
--pollen-200:#FFE08A; /* light pollen glow */
--pollen-100:#FFF1C2; /* faint glow / highlight */
/* Indica greens — secondary, organic */
--indica-800:#1E2A15; /* deep canopy */
--indica-700:#2E3D22; /* leaf shadow */
--indica-500:#5C7A3D; /* leaf */
--sage-400: #8AA463; /* sage */
--sage-300: #A9BE86; /* light sage */
/* Cream / parchment — light text & paper */
--cream-50: #FBF6EA;
--cream-100: #F7EDD6;
--cream-200: #E9D9B6;
--cream-300: #CBB68A; /* muted parchment text */
/* ---------- SEMANTIC COLOR ---------- */
--bg: var(--rosin-900);
--bg-deep: var(--rosin-950);
--surface: var(--rosin-850);
--surface-raised:var(--rosin-800);
--fg1: var(--cream-50); /* primary text on dark */
--fg2: var(--cream-300); /* secondary / muted text */
--fg3: #8A7A5C; /* tertiary / captions */
--fg-on-gold: #2A1705; /* text on gold fills */
--brand: var(--gold-400); /* primary action / brand */
--brand-hover: var(--gold-300);
--brand-press: var(--amber-500);
--accent: var(--amber-500); /* secondary warm accent */
--leaf: var(--sage-400); /* organic / "natural" tag */
--border: rgba(240,169,43,.18); /* gold hairline */
--border-strong: rgba(240,169,43,.38);
--divider: rgba(247,237,214,.08);
/* Rosin glass — translucent amber panels */
--glass-bg: rgba(201,130,31,.10);
--glass-bg-2: rgba(110,63,14,.14);
--glass-border: rgba(255,224,138,.28);
--glass-blur: 10px;
--positive: #7FB04A;
--warning: var(--gold-300);
--danger: #D9663B;
/* ---------- TYPE FAMILIES ---------- */
--font-display: "Clash Display", "Satoshi", system-ui, sans-serif;
--font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-street: "Bungee", "Clash Display", system-ui, sans-serif; /* graffiti/street accent */
--font-mono: "Satoshi", ui-monospace, "SF Mono", Menlo, monospace;
/* ---------- TYPE SCALE (fluid) ---------- */
--fs-display: clamp(2.75rem, 6vw + 1rem, 6rem); /* hero */
--fs-h1: clamp(2.25rem, 4vw + 1rem, 4rem);
--fs-h2: clamp(1.75rem, 2.4vw + 1rem, 2.75rem);
--fs-h3: clamp(1.3rem, 1.2vw + 1rem, 1.75rem);
--fs-lead: clamp(1.125rem, .6vw + 1rem, 1.375rem);
--fs-body: 1.0625rem;
--fs-small: 0.9375rem;
--fs-eyebrow: 0.8125rem;
--lh-tight: 1.04;
--lh-snug: 1.18;
--lh-body: 1.6;
/* ---------- SPACING (8px base) ---------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 128px;
/* ---------- RADII ---------- */
--r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
--r-pill: 999px;
/* ---------- SHADOWS / GLOW ---------- */
--sh-sm: 0 2px 8px rgba(0,0,0,.4);
--sh-md: 0 10px 30px rgba(0,0,0,.45);
--sh-lg: 0 30px 70px rgba(0,0,0,.55);
--glow-honey: 0 0 60px rgba(240,169,43,.45), 0 0 140px rgba(255,200,87,.25);
--glow-soft: 0 0 28px rgba(240,169,43,.30);
--inset-glass: inset 0 1px 0 rgba(255,241,194,.22), inset 0 -20px 50px rgba(110,63,14,.18);
/* ---------- MOTION ---------- */
--ease-out: cubic-bezier(.16,.84,.44,1);
--ease-soft: cubic-bezier(.33,.1,.2,1);
--dur-fast: 160ms;
--dur-med: 320ms;
--dur-slow: 620ms;
}
/* ============================================================
SEMANTIC TYPE CLASSES
============================================================ */
.display {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: -0.02em;
color: var(--fg1);
}
h1, .h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h1);
line-height: var(--lh-tight);
letter-spacing: -0.02em;
color: var(--fg1);
}
h2, .h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: -0.015em;
color: var(--fg1);
}
h3, .h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h3);
line-height: var(--lh-snug);
letter-spacing: -0.01em;
color: var(--fg1);
}
.lead {
font-family: var(--font-body);
font-size: var(--fs-lead);
line-height: var(--lh-body);
color: var(--fg2);
}
p, .body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg2);
}
.small { font-size: var(--fs-small); color: var(--fg2); }
.caption { font-size: var(--fs-eyebrow); color: var(--fg3); }
/* Eyebrow / kicker — uppercase tracked label */
.eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--gold-300);
}
/* Street tag — graffiti accent. Use SPARINGLY (badges, stamps). */
.street {
font-family: var(--font-street);
font-weight: 400;
letter-spacing: 0.01em;
text-transform: uppercase;
}
/* Honey gradient text */
.text-honey {
background: linear-gradient(100deg, var(--pollen-200), var(--gold-400) 45%, var(--amber-500));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}