/* ========================================================================== DESIGN TOKENS — Spices of Kerala Direction: Spice Dept editorial warmth, brand plum substituted for brown. Palette discipline: cream #F5F3EC · tan #EAE1D1 · plum #4D0332 · ONE hot paprika accent #F4701D · coral #FFAEA2 on plum · rare sage. Type: Archivo (chunky 900 display, tight tracking) + Fraunces (serif body). Uppercase + wide tracking ONLY at micro-label sizes (11–13px). ========================================================================== */ :root { /* -------------------------------------------------------------------------- COLOR: TURMERIC GOLD (Accent — CTAs, stars, diamonds, ornament) Matched to the packaging label gold (kasavu / turmeric). -------------------------------------------------------------------------- */ --color-turmeric-50: #FAF5E9; --color-turmeric-100: #F1E8D2; --color-turmeric-200: #E3D3AC; --color-turmeric-300: #CDAF6E; --color-turmeric-400: #B98A2F; /* ACCENT — muted ochre, used sparingly */ --color-turmeric-500: #A0761F; /* hover / active */ --color-turmeric-600: #8A6414; /* text-safe accent on cream */ --color-turmeric-700: #7A520D; --color-turmeric-800: #573A09; --color-turmeric-900: #372405; /* -------------------------------------------------------------------------- COLOR: SOFT HONEY (legacy ramp — kept for primitives, no semantic role) -------------------------------------------------------------------------- */ --color-cardamom-50: #FBF8EE; --color-cardamom-100: #F6F0DC; --color-cardamom-200: #F0E6C9; --color-cardamom-300: #EADBB6; --color-cardamom-400: #D9C393; --color-cardamom-500: #C3A76C; --color-cardamom-600: #A5894F; --color-cardamom-700: #82693B; --color-cardamom-800: #5F4B28; --color-cardamom-900: #3D2F18; /* -------------------------------------------------------------------------- COLOR: DEEP PLUM (Brand anchor — text, dark sections, buttons, footer) Centred on #4D0332 — the logo wordmark plum -------------------------------------------------------------------------- */ --color-cinnamon-50: #F7EBF2; --color-cinnamon-100: #ECD2E0; --color-cinnamon-200: #D9A6C2; --color-cinnamon-300: #C077A0; --color-cinnamon-400: #96487A; --color-cinnamon-500: #4D0332; /* Brand plum */ --color-cinnamon-600: #40022A; --color-cinnamon-700: #330221; --color-cinnamon-800: #260119; --color-cinnamon-900: #190110; /* Named brand tokens */ --color-plum: #4D0332; --color-plum-deep: #3A0225; /* hover for plum buttons */ --color-coral: #EFD494; /* eyebrow/badge text on plum — now label gold */ --color-sage: #C6D9A3; /* single-use secondary accent */ /* Packaging-derived tokens (from the label artwork) */ --color-gold: #B98A2F; /* muted ochre — stars, rare accents only */ --color-gold-soft: #E3D3AC; /* gold on dark surfaces */ --color-brick: #8C2F1E; /* label border maroon-brick */ --color-brick-deep: #6E2114; --color-label-cream:#F8F1E0; /* the label paper cream */ /* -------------------------------------------------------------------------- COLOR: CHILI RED (Danger / Sale) -------------------------------------------------------------------------- */ --color-chili-50: #FEF0EE; --color-chili-100: #FDDAD6; --color-chili-200: #FAB4AD; --color-chili-300: #F58075; --color-chili-400: #EE5245; --color-chili-500: #D63B2E; /* Sale / Alert */ --color-chili-600: #B52C20; --color-chili-700: #8F2019; --color-chili-800: #6D1812; --color-chili-900: #54130E; /* -------------------------------------------------------------------------- COLOR: NEUTRALS — cream/tan spectrum -------------------------------------------------------------------------- */ --color-cream: #FAF9F5; /* Page background — near-white warm */ --color-tan: #F1EEE6; /* Secondary surface */ --color-off-white: #FFFFFF; /* Card / surface lift */ --color-warm-white: #F5F3EC; /* Subtle surface */ --color-sand-50: #EDE8DC; --color-sand-100: #DDD5C4; --color-sand-200: #C9BEA8; --color-sand-300: #B3A18A; --color-sand-400: #96806A; --color-sand-500: #7A6250; /* Plum-toned text spectrum */ --color-charcoal-50: #F6F0F3; --color-charcoal-100: #E8DBE2; --color-charcoal-200: #CDB3C2; --color-charcoal-300: #B292A4; --color-charcoal-400: #96718A; /* muted */ --color-charcoal-500: #825873; --color-charcoal-600: #6E3B5C; /* secondary text */ --color-charcoal-700: #5D1F46; --color-charcoal-800: #4D0332; /* Primary text — logo plum exact */ --color-charcoal-900: #2B011C; /* High-contrast text */ --color-white: #FFFFFF; --color-black: #14020D; /* -------------------------------------------------------------------------- SEMANTIC COLOR ALIASES -------------------------------------------------------------------------- */ /* Primary = plum (buttons, dark surfaces) */ --color-primary: var(--color-plum); --color-primary-light: var(--color-cinnamon-400); --color-primary-dark: var(--color-plum-deep); --color-primary-bg: var(--color-cinnamon-50); /* Text-safe primary — eyebrows/labels on light backgrounds */ --color-primary-text: var(--color-plum); /* Secondary = deep plum family (kept for page css compatibility) */ --color-secondary: var(--color-cinnamon-500); --color-secondary-light: var(--color-cinnamon-300); --color-secondary-dark: var(--color-cinnamon-700); --color-secondary-bg: var(--color-cinnamon-50); /* Accent = paprika pop */ --color-accent: var(--color-turmeric-400); --color-accent-light: var(--color-turmeric-200); --color-accent-dark: var(--color-turmeric-500); --color-accent-bg: var(--color-turmeric-50); --color-accent-text: var(--color-turmeric-600); /* text-safe on cream */ --color-danger: var(--color-chili-500); --color-danger-light: var(--color-chili-100); --color-success: #3A7D44; --color-success-light: #C5E8B0; /* Chili rust — spare accent (badges, sale highlights) */ --color-rust: #723213; /* Subscription = deep plum identity */ --color-subscription: var(--color-cinnamon-500); --color-subscription-dark: var(--color-cinnamon-700); --color-subscription-light: var(--color-cinnamon-200); --color-subscription-bg: var(--color-cinnamon-50); /* Text */ --color-text-primary: var(--color-charcoal-800); /* #4D0332 plum */ --color-text-secondary: var(--color-charcoal-600); --color-text-muted: var(--color-charcoal-400); --color-text-inverse: var(--color-cream); /* Backgrounds */ --color-bg-page: var(--color-cream); --color-bg-surface: var(--color-off-white); --color-bg-subtle: var(--color-tan); --color-bg-overlay: rgba(77, 3, 50, 0.55); /* Borders */ --color-border: var(--color-sand-100); --color-border-strong: var(--color-sand-200); --color-border-focus: var(--color-turmeric-400); /* paprika focus ring */ /* -------------------------------------------------------------------------- TYPOGRAPHY Display: Archivo — chunky grotesque, weight 900, expanded width, TIGHT tracking, sentence case. (ABCGinto analogue) Body: Fraunces — characterful old-style serif with true italics. (GT-Alpina analogue) Uppercase + wide tracking is reserved for 11–13px micro-labels only. -------------------------------------------------------------------------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-sans: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-script: 'Fraunces', Georgia, serif; /* use with font-style: italic */ --font-mono: ui-monospace, 'SF Mono', 'Courier New', Courier, monospace; /* Width axis — Fraunces has none; keep for Archivo micro-label use */ --font-display-stretch: 100%; /* Type scale — rem */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px — Archivo body */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.375rem; /* 22px */ --font-size-xl: 1.625rem; /* 26px */ --font-size-2xl: 2rem; /* 32px */ --font-size-3xl: 2.5rem; /* 40px */ --font-size-4xl: 3rem; /* 48px */ --font-size-5xl: 3.5rem; /* 56px */ --font-size-6xl: 4rem; /* 64px */ --font-size-7xl: 4.5rem; /* 72px */ /* Named display sizes */ --font-size-display: clamp(2.75rem, 6.5vw, 5rem); /* hero h1 */ --font-size-h2: clamp(2rem, 4.2vw, 3.25rem); /* section headings */ --font-size-h3: clamp(1.375rem, 2.5vw, 1.75rem); --font-size-label: 0.75rem; /* 12px micro-labels (nav, buttons) */ --font-size-eyebrow: 0.6875rem; /* 11px eyebrows */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 900; --line-height-tight: 1.05; /* display */ --line-height-snug: 1.15; /* headings */ --line-height-normal: 1.35; --line-height-relaxed: 1.55; --line-height-body: 1.65; /* Fraunces has a big x-height */ --line-height-loose: 2; /* Letter spacing — THE INVERSION: tight on big type, wide ONLY on micro-labels */ --letter-spacing-display: -0.015em; /* hero / H1 — serif needs less crush */ --letter-spacing-tight: -0.01em; /* H2–H3 */ --letter-spacing-snug: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.08em; /* buttons */ --letter-spacing-widest: 0.12em; /* nav links, badges */ --letter-spacing-ultra: 0.15em; /* 11px eyebrows only */ /* -------------------------------------------------------------------------- SPACING SCALE (base 4px) -------------------------------------------------------------------------- */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-56: 14rem; /* 224px */ --space-64: 16rem; /* 256px */ /* Section vertical rhythm */ --section-pad: clamp(64px, 9vw, 128px); /* -------------------------------------------------------------------------- BORDER RADIUS — sharp buttons/badges, minimal elsewhere -------------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 0.125rem; /* 2px */ --radius-base: 0.25rem; /* 4px — inputs only */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px — cards subtle */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-3xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* -------------------------------------------------------------------------- SHADOWS — restrained, plum-tinted -------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(77, 3, 50, 0.04); --shadow-sm: 0 1px 4px rgba(77, 3, 50, 0.06), 0 1px 2px rgba(77, 3, 50, 0.04); --shadow-base: 0 2px 8px rgba(77, 3, 50, 0.06), 0 1px 3px rgba(77, 3, 50, 0.04); --shadow-md: 0 4px 16px rgba(77, 3, 50, 0.07), 0 2px 4px rgba(77, 3, 50, 0.04); --shadow-lg: 0 8px 24px rgba(77, 3, 50, 0.08), 0 4px 8px rgba(77, 3, 50, 0.05); --shadow-xl: 0 16px 48px rgba(77, 3, 50, 0.10); --shadow-2xl: 0 32px 80px rgba(77, 3, 50, 0.13); --shadow-inner: inset 0 2px 4px rgba(77, 3, 50, 0.06); /* Tinted glows */ --shadow-primary: 0 4px 18px rgba(223, 164, 54, 0.30); --shadow-secondary: 0 4px 18px rgba(77, 3, 50, 0.22); /* Glass-morphism */ --shadow-glass: 0 8px 40px rgba(77, 3, 50, 0.10); --backdrop-blur: blur(16px); /* -------------------------------------------------------------------------- TRANSITIONS -------------------------------------------------------------------------- */ --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-slowest: 900ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --transition-fast: all var(--duration-fast) var(--ease-out); --transition-base: all var(--duration-normal) var(--ease-out); --transition-slow: all var(--duration-slow) var(--ease-out); --transition-color: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --transition-transform: transform var(--duration-normal) var(--ease-out); --transition-shadow: box-shadow var(--duration-normal) var(--ease-out); --transition-opacity: opacity var(--duration-normal) var(--ease-out); /* -------------------------------------------------------------------------- Z-INDEX SCALE -------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; --z-spotlight: 800; /* -------------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------------- */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 960px; --container-xl: 1200px; --container-2xl: 1440px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1200px; --breakpoint-2xl: 1440px; --header-height-mobile: 64px; --header-height-desktop: 72px; --announcement-bar-height: 40px; --grid-columns: 12; --grid-gutter: var(--space-8); --grid-gutter-sm: var(--space-5); /* -------------------------------------------------------------------------- COMPONENT TOKENS — sharp corners, generous padding -------------------------------------------------------------------------- */ /* Buttons: quiet pills */ --btn-padding-y-sm: var(--space-2-5); --btn-padding-x-sm: var(--space-5); --btn-padding-y: var(--space-4); --btn-padding-x: var(--space-8); --btn-padding-y-lg: var(--space-5); --btn-padding-x-lg: var(--space-10); --btn-radius: var(--radius-full); --btn-radius-lg: var(--radius-full); /* Inputs: very slight radius for usability */ --input-padding-y: var(--space-3-5); --input-padding-x: var(--space-5); --input-border-radius: var(--radius-none); --input-border-color: var(--color-border-strong); --input-focus-ring: 0 0 0 3px rgba(223, 164, 54, 0.30); /* Cards: soft corners, minimal shadow */ --card-padding: var(--space-8); --card-radius: var(--radius-xl); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); --badge-padding-y: var(--space-1); --badge-padding-x: var(--space-3); --badge-radius: var(--radius-none); /* -------------------------------------------------------------------------- STAR RATING -------------------------------------------------------------------------- */ --star-color-filled: var(--color-turmeric-400); /* paprika */ --star-color-empty: var(--color-sand-100); --star-size-sm: 0.875rem; --star-size-base: 1rem; --star-size-lg: 1.25rem; /* -------------------------------------------------------------------------- BRIDGE TOKENS — shorthand dialect used by header/hero/footer/components/ product-card/patterns/animations css. Keep in sync with semantics above. -------------------------------------------------------------------------- */ --color-bg: var(--color-cream); --color-text: var(--color-plum); --color-dark: var(--color-plum); --color-surface: var(--color-tan); --font-heading: var(--font-display); --transition: 0.25s ease; --container-width: 1200px; --container-pad: clamp(16px, 4vw, 60px); --header-h: 64px; } @media (min-width: 1024px) { :root { --header-h: 72px; } }