/* ================================================================ * Raj Collection Sequel — Design Tokens * * ONE source of truth for color, type, spacing, radius, shadow, motion. * Mobile-first values. Desktop scales override at @media (min-width: 769px). * * All tokens prefixed --rcs- to avoid collisions with anything else. * ================================================================ */ :root { /* ---------- COLOR ---------- */ /* Brand */ --rcs-primary: #6B1A2E; /* maroon — CTAs, brand */ --rcs-primary-deep: #4F0F22; /* deeper maroon for gradients */ --rcs-primary-soft: #8B3548; /* hover/pressed lighter maroon */ --rcs-accent: #C9A961; /* gold — ornaments, accents */ --rcs-bronze: #8A6B3E; /* secondary accent */ /* Surface scale (warm cream paper) */ --rcs-canvas: #FAF6F0; /* page background */ --rcs-surface: #FDF9F3; /* card background */ --rcs-surface-2: #FFFCF6; /* elevated card */ --rcs-section-tint: #F2E9D9; /* warm-tinted section block */ --rcs-field: #FFFFFF; /* form field background */ /* Ink (text) */ --rcs-text: #2C2C2A; /* body */ --rcs-text-muted: #6F6A66; /* secondary */ --rcs-text-subtle: #97928D; /* tertiary */ --rcs-text-inverse: #FFFFFF; /* on dark surfaces */ /* Borders */ --rcs-outline: rgba(28, 26, 25, 0.08); --rcs-outline-strong: rgba(28, 26, 25, 0.18); --rcs-outline-on-dark: rgba(255, 255, 255, 0.16); /* Semantic */ --rcs-success: #2E7D32; --rcs-success-soft: #EEF7EE; --rcs-warning: #B7791F; --rcs-warning-soft: #FFF8E6; --rcs-error: #BA1A1A; --rcs-error-soft: #FCEDED; --rcs-info: #1F6F8B; --rcs-info-soft: #E8F2F6; /* WhatsApp brand (for the floater) */ --rcs-whatsapp: #25D366; /* ---------- TYPOGRAPHY ---------- */ --rcs-font-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif; --rcs-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --rcs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Mobile type scale (px) */ --rcs-size-xxs: 10px; /* labels, footnotes */ --rcs-size-xs: 11px; /* uppercase eyebrow */ --rcs-size-sm: 12px; /* meta */ --rcs-size-base: 14px; /* body small */ --rcs-size-md: 15px; /* body */ --rcs-size-lg: 16px; /* body emphasis */ --rcs-size-xl: 18px; /* h4 */ --rcs-size-2xl: 20px; /* h3 */ --rcs-size-3xl: 22px; /* h2 small */ --rcs-size-4xl: 26px; /* h2 */ --rcs-size-5xl: 30px; /* h1 mobile */ --rcs-size-6xl: 38px; /* hero-sub */ --rcs-size-7xl: 44px; /* hero */ /* Line heights */ --rcs-lh-tight: 1.1; --rcs-lh-snug: 1.2; --rcs-lh-base: 1.45; --rcs-lh-relaxed: 1.55; --rcs-lh-loose: 1.7; /* Letter spacing */ --rcs-track-tighter: -0.02em; --rcs-track-tight: -0.01em; --rcs-track-normal: 0; --rcs-track-wide: 0.04em; --rcs-track-wider: 0.08em; --rcs-track-ui: 0.14em; /* UI uppercase labels */ --rcs-track-display: 0.18em; /* large display caps */ /* Font weights */ --rcs-fw-regular: 400; --rcs-fw-medium: 500; --rcs-fw-semi: 600; --rcs-fw-bold: 700; /* ---------- SPACING (4px grid) ---------- */ --rcs-space-1: 4px; --rcs-space-2: 8px; --rcs-space-3: 12px; --rcs-space-4: 16px; --rcs-space-5: 20px; --rcs-space-6: 24px; --rcs-space-7: 32px; --rcs-space-8: 40px; --rcs-space-9: 56px; --rcs-space-10: 72px; --rcs-space-11: 96px; --rcs-space-12: 128px; /* Page gutter (single source of truth) */ --rcs-gutter: 16px; --rcs-gutter-lg: 24px; /* ---------- RADIUS ---------- */ --rcs-r-1: 6px; --rcs-r-2: 8px; --rcs-r-3: 10px; --rcs-r-4: 12px; --rcs-r-5: 14px; --rcs-r-6: 18px; --rcs-r-7: 24px; --rcs-r-pill: 999px; /* ---------- SHADOW (tinted with brand maroon for warmth) ---------- */ --rcs-shadow-sm: 0 1px 2px rgba(28, 26, 25, 0.04), 0 1px 3px rgba(28, 26, 25, 0.06); --rcs-shadow-md: 0 2px 4px rgba(28, 26, 25, 0.05), 0 8px 24px -10px rgba(28, 26, 25, 0.10); --rcs-shadow-lg: 0 6px 12px -4px rgba(28, 26, 25, 0.08), 0 20px 40px -12px rgba(28, 26, 25, 0.16); --rcs-shadow-xl: 0 10px 20px -6px rgba(107, 26, 46, 0.18), 0 32px 60px -20px rgba(107, 26, 46, 0.30); --rcs-shadow-press: inset 0 1px 2px rgba(28, 26, 25, 0.08); --rcs-shadow-focus: 0 0 0 4px rgba(107, 26, 46, 0.18); --rcs-shadow-cta: 0 4px 14px -4px rgba(107, 26, 46, 0.45); /* ---------- MOTION CURVES ---------- */ --rcs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Quart-out — silk */ --rcs-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --rcs-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --rcs-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --rcs-snap: cubic-bezier(0.83, 0, 0.17, 1); /* Durations */ --rcs-dur-1: 120ms; /* tap response */ --rcs-dur-2: 200ms; /* small */ --rcs-dur-3: 280ms; /* button/input */ --rcs-dur-4: 380ms; /* sheet enter */ --rcs-dur-5: 520ms; /* hero, big */ --rcs-dur-6: 720ms; /* page transition */ /* ---------- Z-INDEX ---------- */ --rcs-z-base: 0; --rcs-z-sticky: 10; /* sticky header */ --rcs-z-dropdown: 50; --rcs-z-sticky-bar: 80; /* sticky ATC, sticky checkout */ --rcs-z-fab: 90; /* WhatsApp FAB */ --rcs-z-bottom-nav: 100; --rcs-z-overlay: 500; /* modal backdrops */ --rcs-z-drawer: 600; /* mobile drawer */ --rcs-z-toast: 900; --rcs-z-popover: 950; /* ---------- LAYOUT ---------- */ --rcs-tap: 44px; /* min tap target */ --rcs-bottom-nav-h: 60px; --rcs-safe-bottom: env(safe-area-inset-bottom, 0px); --rcs-safe-top: env(safe-area-inset-top, 0px); /* ---------- DARK MODE PROVISIONS (off by default) ---------- */ color-scheme: light; } /* Larger screens — adjust scale up for desktop */ @media (min-width: 769px) { :root { --rcs-size-5xl: 40px; --rcs-size-6xl: 54px; --rcs-size-7xl: 72px; --rcs-gutter: 32px; --rcs-gutter-lg: 48px; } } /* Reduce-motion respect */ @media (prefers-reduced-motion: reduce) { :root { --rcs-dur-1: 1ms; --rcs-dur-2: 1ms; --rcs-dur-3: 1ms; --rcs-dur-4: 1ms; --rcs-dur-5: 1ms; --rcs-dur-6: 1ms; } }