/* ──────────────────────────────────────────────────────────────────────────
Sylhetica — Design Tokens
Premium International Tea Lifestyle Brand
Inspired by Sylhet — the tea capital of Bangladesh.
Load fonts (host or via Google Fonts):
Cormorant Garamond → display serif (300, 400, 500, italics)
Manrope → UI / body sans (400, 500, 600, 700)
JetBrains Mono → mono accents (400, 500) — optional, sparingly
────────────────────────────────────────────────────────────────────────── */
:root {
/* ── BRAND SCALE — Sylhet Green (deep tea garden) ─────────────────────── */
--brand-50: #F2F5F0;
--brand-100: #E2EAE0;
--brand-200: #C2D2BD;
--brand-300: #9CB494;
--brand-400: #7A9670;
--brand-500: #4D6E45;
--brand-600: #385636;
--brand-700: #2C4A3A; /* primary */
--brand-800: #213628;
--brand-900: #14241A;
/* ── ACCENT SCALE — Brewed Amber (color of black tea liquor) ──────────── */
--amber-50: #FAF3E8;
--amber-100: #F1E1C5;
--amber-200: #E5C896;
--amber-300: #D6AD6A;
--amber-400: #C19450;
--amber-500: #B07A3C; /* accent */
--amber-600: #8C5E2C;
--amber-700: #6B461F;
--amber-800: #4A2F15;
--amber-900: #2B1B0C;
/* ── BASE NEUTRALS — warm cream / ink ─────────────────────────────────── */
--cream-50: #FFFEF9;
--cream-100: #FAF6EC;
--cream-200: #F2EBD9;
--cream-300: #E5DDC9;
--cream-400: #C9BEA5;
--cream-500: #A89C7E;
--cream-600: #7A6F60;
--cream-700: #4B4439;
--cream-800: #2A251E;
--cream-900: #1B1813;
/* ── SEMANTIC TOKENS — LIGHT ──────────────────────────────────────────── */
--bg: #FAF6EC; /* warm cream page */
--bg-elevated: #FFFEF9; /* card / surface */
--bg-muted: #F2EBD9; /* subtle fills */
--bg-inverse: #1B1813; /* footer / contrast blocks */
--fg: #1B1813; /* primary ink */
--fg-muted: #4B4439; /* secondary copy */
--fg-subtle: #7A6F60; /* tertiary / captions */
--fg-inverse: #FAF6EC;
--primary: #2C4A3A;
--primary-fg: #FAF6EC;
--primary-hover: #213628;
--accent: #B07A3C;
--accent-fg: #FFFEF9;
--accent-hover: #8C5E2C;
--border: #E5DDC9;
--border-strong: #C9BEA5;
--ring: #2C4A3A;
--success: #5B7F3F;
--success-bg: #EFF3E8;
--warning: #B07A3C;
--warning-bg: #FAF3E8;
--destructive: #A23D2A;
--destructive-bg: #F6E3DC;
--info: #3D5A6E;
--info-bg: #E6ECF0;
/* product / commerce specific */
--price: #1B1813;
--price-sale: #A23D2A;
--price-strike: #A89C7E;
--stock-in: #5B7F3F;
--stock-low: #B07A3C;
--stock-out: #A23D2A;
/* ── TYPE FAMILIES ────────────────────────────────────────────────────── */
--font-display: "Cormorant Garamond", "EB Garamond", "Garamond", "Iowan Old Style", "Apple Garamond", "Palatino Linotype", serif;
--font-body: "Manrope", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
/* ── TYPE SCALE (semantic) ─────────────────────────────────────────────
Display = Cormorant. Body/UI = Manrope.
Letter-spacing favors tight on display, neutral on body,
wide-tracked on labels/eyebrows. */
--text-display-1: 400 clamp(56px, 7vw, 92px)/1.02 var(--font-display);
--text-display-2: 400 clamp(44px, 5.4vw, 68px)/1.05 var(--font-display);
--text-h1: 400 clamp(36px, 4vw, 52px)/1.1 var(--font-display);
--text-h2: 400 clamp(28px, 2.8vw, 40px)/1.15 var(--font-display);
--text-h3: 500 22px/1.3 var(--font-body);
--text-h4: 600 16px/1.4 var(--font-body);
--text-eyebrow: 500 12px/1.2 var(--font-body); /* + letter-spacing .22em uppercase */
--text-body-lg: 400 18px/1.6 var(--font-body);
--text-body: 400 15px/1.6 var(--font-body);
--text-body-sm: 400 13px/1.5 var(--font-body);
--text-caption: 500 11px/1.3 var(--font-body); /* + letter-spacing .14em uppercase */
--text-price: 500 18px/1.2 var(--font-body); /* tabular-nums */
--text-price-lg: 500 28px/1.1 var(--font-body);
--text-button: 500 14px/1 var(--font-body); /* + letter-spacing .04em */
/* ── SPACING (4px base) ───────────────────────────────────────────────── */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* ── RADIUS — premium feel = restrained ───────────────────────────────── */
--radius-sm: 2px; /* inputs / badges */
--radius-md: 4px; /* buttons */
--radius-lg: 8px; /* cards */
--radius-xl: 16px; /* modals / drawers */
--radius-pill: 9999px;
/* ── SHADOWS — soft, warm, low-contrast ───────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(27, 24, 19, 0.04);
--shadow-sm: 0 2px 6px rgba(27, 24, 19, 0.06), 0 1px 2px rgba(27, 24, 19, 0.04);
--shadow-md: 0 8px 20px rgba(27, 24, 19, 0.08), 0 2px 6px rgba(27, 24, 19, 0.04);
--shadow-lg: 0 20px 40px rgba(27, 24, 19, 0.12), 0 4px 10px rgba(27, 24, 19, 0.06);
--shadow-drawer: -16px 0 48px rgba(27, 24, 19, 0.16);
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
/* ── MOTION ───────────────────────────────────────────────────────────── */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* primary easing */
--ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
--duration-fast: 140ms;
--duration-base: 220ms;
--duration-slow: 420ms;
/* ── LAYOUT ───────────────────────────────────────────────────────────── */
--container-narrow: 720px;
--container: 1200px;
--container-wide: 1440px;
--gutter: clamp(16px, 4vw, 48px);
/* ── Z ────────────────────────────────────────────────────────────────── */
--z-base: 1;
--z-sticky: 100;
--z-overlay: 800;
--z-drawer: 900;
--z-modal: 1000;
--z-toast: 1100;
}
/* ── SEMANTIC TOKENS — DARK ─────────────────────────────────────────────── */
:root.dark,
[data-theme="dark"] {
--bg: #15110C;
--bg-elevated: #1F1A12;
--bg-muted: #2A251E;
--bg-inverse: #FAF6EC;
--fg: #F0E8D5;
--fg-muted: #C9BEA5;
--fg-subtle: #9A8E78;
--fg-inverse: #15110C;
--primary: #9CB494; /* lifted for legibility on dark */
--primary-fg: #15110C;
--primary-hover: #C2D2BD;
--accent: #D6AD6A;
--accent-fg: #15110C;
--accent-hover: #E5C896;
--border: #2F271B;
--border-strong: #4B4439;
--ring: #9CB494;
--success: #9CB494;
--success-bg: #1E2A1B;
--warning: #D6AD6A;
--warning-bg: #2B1F0E;
--destructive: #D88370;
--destructive-bg: #2B1612;
--info: #8CA8BC;
--info-bg: #131C24;
--price: #F0E8D5;
--price-sale: #D88370;
--price-strike: #7A6F60;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 8px 20px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.4);
--shadow-drawer: -16px 0 48px rgba(0, 0, 0, 0.7);
}
/* ── BASE ELEMENT STYLES (drop-in) ──────────────────────────────────────── */
html { color-scheme: light dark; }
body {
margin: 0;
font: var(--text-body);
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "calt", "ss01";
}
h1 { font: var(--text-h1); margin: 0; letter-spacing: -0.01em; }
h2 { font: var(--text-h2); margin: 0; letter-spacing: -0.005em; }
h3 { font: var(--text-h3); margin: 0; }
h4 { font: var(--text-h4); margin: 0; }
p { font: var(--text-body); margin: 0; color: var(--fg); }
small { font: var(--text-body-sm); color: var(--fg-muted); }
.eyebrow {
font: var(--text-eyebrow);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-subtle);
}
.caption {
font: var(--text-caption);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-subtle);
}
.price { font: var(--text-price); font-variant-numeric: tabular-nums; color: var(--price); }
.price--sale { color: var(--price-sale); }
.price--strike { color: var(--price-strike); text-decoration: line-through; }
code, kbd { font: 500 13px/1.5 var(--font-mono); }