/* ============================================================ Nanmayil — Design Tokens (Editorial Luxury) ------------------------------------------------------------ The single source of truth for color, type, space, radius, shadow, motion, and z-index. Every other stylesheet reads from these tokens. Legacy variable aliases at the bottom keep the pre-redesign CSS working during migration. ============================================================ */ :root { /* -------------------------------------------------------- COLOR — Editorial Luxury -------------------------------------------------------- Canvas : warm ivories, the site's "paper" Ink : near-black editorial text Brand : deep emerald family (Nanmayil signature) Accent : champagne gold (used sparingly, decorative) Neutral : 50 → 900 scale for borders / surfaces / text Semantic: success / warning / danger / info (AA-verified) -------------------------------------------------------- */ /* Canvas — backgrounds */ --color-canvas: #FBF8F3; /* primary page background (ivory) */ --color-canvas-alt: #F4EEE3; /* alternating sections (warm paper) */ --color-canvas-sunk: #EFE7D8; /* pressed / subtle inset surface */ --color-surface: #FFFFFF; /* cards / modals / elevated */ --color-surface-alt: #FAF6EE; /* slightly tinted surface */ /* Ink — text & iconography */ --color-ink: #1A1A1A; /* primary text (17:1 on canvas) */ --color-ink-soft: #333333; /* secondary text (13:1 on canvas) */ --color-ink-mute: #6B6B6B; /* meta / helper text (5.6:1 on canvas) */ --color-ink-faint: #8F8F8F; /* placeholders (3.8:1) — non-text only */ --color-ink-inverse: #FBF8F3; /* text on dark surfaces */ /* Brand — premium teal-emerald family */ --color-brand: #0B6E6E; /* dark teal — primary brand (6.8:1 on canvas) */ --color-brand-strong: #085A5A; /* pressed / active teal */ --color-brand-mid: #0D8A7A; /* mid teal-emerald — default buttons */ --color-brand-soft: #3D9E94; /* soft teal — subtle accents */ --color-brand-tint: #E0F2F1; /* faint teal tint — selected chips */ --color-brand-wash: #F0FAFA; /* nearly-white teal wash */ /* Accent — champagne gold (decorative, never body text) */ --color-accent: #C9A961; /* champagne gold — hairlines, dividers, flourishes */ --color-accent-soft: #E4CA8A; /* soft gold — hovers, subtle highlights */ --color-accent-deep: #A8882E; /* deep gold — use on ivory for labels (4.6:1) */ /* Neutral ramp — borders, dividers, subtle surfaces */ --color-neutral-50: #FAFAF8; --color-neutral-100: #F2F0EB; --color-neutral-200: #E6E3DC; --color-neutral-300: #D4D0C6; --color-neutral-400: #B3AEA1; --color-neutral-500: #8A8578; --color-neutral-600: #655F52; --color-neutral-700: #4A453B; --color-neutral-800: #2F2B24; --color-neutral-900: #1A1814; /* Borders & dividers */ --color-border: #E6E3DC; /* default hairline */ --color-border-strong: #D4D0C6; /* emphasized divider */ --color-border-soft: #F2F0EB; /* barely-there divider */ /* Semantic — all verified against canvas for AA */ --color-success: #1F7A4C; /* 6.3:1 on canvas */ --color-success-bg: #E7F2EC; --color-warning: #B8791A; /* 4.6:1 on canvas */ --color-warning-bg: #FAF1DF; --color-danger: #B32D22; /* 5.8:1 on canvas */ --color-danger-bg: #FBE8E6; --color-info: #1E5A8A; /* 6.4:1 on canvas */ --color-info-bg: #E6EEF6; /* Focus ring — high-contrast, visible on any background */ --color-focus: #0B6E6E; --color-focus-halo: rgba(11, 110, 110, 0.28); /* Overlay / scrim */ --color-overlay: rgba(26, 24, 20, 0.55); --color-overlay-soft: rgba(26, 24, 20, 0.22); /* Gradients */ --gradient-brand: linear-gradient(135deg, var(--color-brand-mid) 0%, var(--color-brand) 100%); --gradient-hero: linear-gradient(180deg, var(--color-canvas) 0%, var(--color-canvas-alt) 100%); --gradient-gold: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent) 100%); /* -------------------------------------------------------- TYPOGRAPHY -------------------------------------------------------- Display : Cormorant Garamond (classical luxury serif) — headings, hero Body : Inter (grotesque sans) — UI, paragraphs Mono : system monospace — code, order IDs -------------------------------------------------------- */ --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Menlo', 'Consolas', monospace; /* Type scale (rem, mobile-first) */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* Line height */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-ui: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Letter-spacing */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; /* small-caps labels */ /* -------------------------------------------------------- SPACE — 4px grid -------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* -------------------------------------------------------- LAYOUT — container widths, gutters -------------------------------------------------------- */ --container-xs: 560px; --container-sm: 720px; --container-md: 960px; --container-lg: 1120px; --container-xl: 1280px; --container-2xl: 1440px; --container-gutter: clamp(1rem, 4vw, 2.5rem); /* Unified breakpoints (for media queries — referenced in comments) */ /* --bp-sm: 480px — large phone --bp-md: 768px — tablet --bp-lg: 1024px — laptop --bp-xl: 1280px — desktop --bp-2xl: 1536px — wide desktop */ /* -------------------------------------------------------- RADIUS -------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px; --radius-circle: 50%; /* -------------------------------------------------------- SHADOWS — warm-tinted (not cool/blue), editorial feel -------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(26, 24, 20, 0.04); --shadow-sm: 0 2px 4px rgba(26, 24, 20, 0.05), 0 1px 2px rgba(26, 24, 20, 0.04); --shadow-md: 0 6px 16px rgba(26, 24, 20, 0.07), 0 2px 4px rgba(26, 24, 20, 0.04); --shadow-lg: 0 14px 32px rgba(26, 24, 20, 0.09), 0 4px 8px rgba(26, 24, 20, 0.05); --shadow-xl: 0 24px 56px rgba(26, 24, 20, 0.12), 0 8px 16px rgba(26, 24, 20, 0.06); --shadow-inset: inset 0 1px 2px rgba(26, 24, 20, 0.06); /* Brand-tinted shadow for primary surfaces (hover) */ --shadow-brand: 0 12px 32px rgba(11, 110, 110, 0.18), 0 4px 8px rgba(11, 110, 110, 0.10); /* Focus halo (also reused as outline where appropriate) */ --shadow-focus: 0 0 0 3px var(--color-focus-halo); /* -------------------------------------------------------- MOTION -------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1); /* slow elegant deceleration */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 240ms; --duration-slow: 480ms; --duration-dramatic: 800ms; /* -------------------------------------------------------- Z-INDEX — named layers -------------------------------------------------------- */ --z-base: 0; --z-raised: 1; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-drawer: 400; --z-modal-backdrop: 500; --z-modal: 510; --z-toast: 600; --z-tooltip: 700; /* -------------------------------------------------------- COMPONENT DEFAULTS -------------------------------------------------------- */ --control-height-sm: 32px; --control-height-md: 44px; /* touch-friendly minimum */ --control-height-lg: 52px; --control-radius: var(--radius-md); --control-padding-x: var(--space-4); /* ============================================================ LEGACY ALIASES — map pre-redesign variables onto new tokens. These let styles.css / modern-theme.css / premium-ui.css / admin-style.css / auth-styles.css etc. keep rendering while we migrate page-by-page. Do not reference these in new code. ============================================================ */ /* From styles.css (emerald palette) */ --green-primary: var(--color-brand-mid); --green-dark: var(--color-brand); --green-darker: var(--color-brand-strong); --green-light: var(--color-brand-tint); --green-lighter: var(--color-brand-wash); --green-accent: var(--color-brand-soft); --white: var(--color-surface); --off-white: var(--color-canvas); --gray-light: var(--color-neutral-100); --gray-border: var(--color-border); --text-primary: var(--color-ink); --text-secondary: var(--color-ink-soft); --text-muted: var(--color-ink-mute); --gradient-green: var(--gradient-brand); --gradient-green-light: linear-gradient(135deg, var(--color-brand-tint) 0%, var(--color-canvas) 100%); --gradient-green-soft: linear-gradient(135deg, var(--color-brand-wash) 0%, var(--color-canvas) 100%); /* From premium-ui.css (sage glass) — re-cast as warm tones */ --bg-sage: var(--color-canvas-alt); --glass-surface: rgba(255, 255, 255, 0.55); --glass-border: 1px solid rgba(255, 255, 255, 0.70); --brand-green: var(--color-brand); --text-main: var(--color-ink); /* From modern-theme.css (brand palette) */ --brand-text: var(--color-ink); --brand-muted: var(--color-ink-mute); --brand-accent: var(--color-accent); --card-bg: var(--color-surface); --card-bdr: var(--color-border); } /* ============================================================ REDUCED MOTION — globally tame transitions ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-dramatic: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }