/* ============================================================
ThinkFlour — Colors & Type Foundations
A modern, earthy, premium brand for millet & traditional
Indian flours. Rooted in tradition, minimal and modern.
============================================================ */
/* ---- Fonts (Google Fonts) ----
Display / brand : Montserrat (matches the ThinkFlour wordmark — geometric, confident)
Body / UI : Mukta (humanist, warm, Devanagari-capable — fits the Indian context)
Editorial accent : Marcellus (classic warmth for the occasional premium serif moment)
Load in HTML :
*/
:root {
/* ============ BRAND CORE ============ */
--tf-grey: #47494C; /* "Think" — charcoal ink, primary brand grey */
--tf-gold: #E0A020; /* "Flour" — signature amber/gold */
--tf-gold-deep: #C2861A; /* pressed / hover gold */
--tf-charcoal: #3C3E42; /* deep charcoal (from logo "Think" grey) — dark surfaces */
--tf-green: #1E9A4F; /* "100% natural" veg-mark / harvest green */
--tf-green-deep: #16793D;
/* ============ EARTHY PRODUCT SPECTRUM ============
Each flour owns an accent colour, pulled from its pouch. */
--tf-sage: #7E8C56; /* Bajra (pearl millet) — olive/sage */
--tf-coral: #DA5642; /* Jowar (sorghum) — coral red */
--tf-forest: #344A3E; /* 5 Grain — deep forest */
--tf-wine: #8E2C4E; /* Ragi (finger millet) — maroon/wine */
--tf-amber: #EFA52A; /* Makki (corn) — warm amber */
--tf-wheat: #D9B26A; /* Besan / Rava / Suji — golden wheat*/
--tf-terracotta: #C47A4D; /* Wheat Dalia — terracotta */
/* ============ NEUTRALS — warm, paper-like ============ */
--tf-ink: #2B2C2E; /* primary text */
--tf-ink-2: #47494C; /* secondary text / brand grey */
--tf-muted: #75736D; /* tertiary / captions */
--tf-faint: #A7A299; /* disabled / hint */
--tf-line: #E7E0D4; /* hairline borders on cream */
--tf-line-2: #D9D1C2; /* stronger divider */
--tf-paper: #FBF8F2; /* primary page background — warm cream */
--tf-paper-2: #F4EEE2; /* raised / alt section background */
--tf-paper-3: #ECE3D3; /* sunk well / inputs */
--tf-white: #FFFFFF; /* product label white, cards */
/* ============ SEMANTIC ============ */
--tf-bg: var(--tf-paper);
--tf-surface: var(--tf-white);
--tf-primary: var(--tf-gold);
--tf-on-primary: #FFFFFF;
--tf-accent: var(--tf-green);
--tf-success: #1E9A4F;
--tf-warning: #E08A1E;
--tf-danger: #C0392B;
/* ============ TYPE FAMILIES ============ */
--font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-serif: 'Marcellus', Georgia, 'Times New Roman', serif;
/* ============ TYPE SCALE (1.250 — major third, fluid-ready) ============ */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 18px;
--text-lg: 22px;
--text-xl: 28px;
--text-2xl: 36px;
--text-3xl: 46px;
--text-4xl: 60px;
--text-5xl: 78px;
--leading-tight: 1.08;
--leading-snug: 1.25;
--leading-normal:1.5;
--leading-relaxed:1.7;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-caps: 0.14em; /* eyebrows / labels (uppercase) */
/* ============ RADII ============ */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* ============ SPACING (4pt base) ============ */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
/* ============ SHADOWS — soft, warm, low-contrast ============ */
--shadow-xs: 0 1px 2px rgba(58, 46, 30, 0.06);
--shadow-sm: 0 2px 8px rgba(58, 46, 30, 0.07);
--shadow-md: 0 8px 24px rgba(58, 46, 30, 0.09);
--shadow-lg: 0 18px 48px rgba(58, 46, 30, 0.12);
--shadow-gold: 0 8px 22px rgba(224, 160, 32, 0.28);
}
/* ============================================================
SEMANTIC TYPE CLASSES
============================================================ */
.tf-eyebrow {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-xs);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--tf-gold-deep);
}
.tf-display {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-5xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--tf-ink);
}
.tf-h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-4xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--tf-ink);
}
.tf-h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-2xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--tf-ink);
}
.tf-h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-xl);
line-height: var(--leading-snug);
color: var(--tf-ink);
}
.tf-h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--tf-ink);
}
.tf-serif {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-3xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
color: var(--tf-ink);
}
.tf-lead {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--tf-ink-2);
}
.tf-body {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--tf-ink-2);
}
.tf-small {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--tf-muted);
}
.tf-label {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-sm);
letter-spacing: 0.01em;
color: var(--tf-ink);
}
.tf-mono-weight {
font-family: var(--font-body);
font-weight: 700;
font-variant-numeric: tabular-nums;
}