/* ========================================================================== BIHARI CHOOLHA — DESIGN TOKENS Single source of truth. Every value below is referenced, never hard-coded. PALETTE PROVENANCE The logo (assets/img/logo.svg) was drawn for this project; its colours were sampled from the restaurant's own listing photography, so the palette traces back to the real food: clay pot body #CA633D #CD592E #A94018 #DB6836 #96360D -> --clr-clay* curry gravy #CE9337 #BB7432 #8D5502 #622810 -> --clr-brass* charred pot/bg #180000 #000000 #301818 -> --clr-ink* All text/background pairs verified >= WCAG AA (see README). ========================================================================== */ :root { /* ---- Core surfaces ---- */ --clr-ink: #0E0906; /* deepest warm black — page base */ --clr-ink-2: #171009; /* raised dark surface */ --clr-ink-3: #221709; /* highest dark surface */ --clr-cream: #FAF4EC; /* light editorial base */ --clr-cream-2: #F0E6D8; /* alternating light surface */ /* ---- Brand: clay ---- */ --clr-clay: #A94018; --clr-clay-deep: #7A2D0F; --clr-clay-lite: #CD592E; /* ---- Fire ---- */ --clr-ember: #E2673A; --clr-ember-hot: #F7A072; /* ---- Metal ---- */ --clr-brass: #D2A244; --clr-brass-lite: #EFC97A; --clr-brass-deep: #A97A28; /* ---- Herb (veg / fresh markers) ---- */ --clr-sarson: #6B8F3A; --clr-sarson-lite: #8FBF4F; /* ---- Text ---- */ --clr-text: #F5EBDD; /* on dark — 16.80:1 */ --clr-text-muted: #C9B4A0; /* on dark — 9.92:1 */ --clr-text-ink: #1F1610; /* on cream — 16.28:1 */ --clr-text-ink-mut: #5C4A3C; /* on cream — 7.69:1 */ /* ---- Lines & glass ---- */ --clr-line: rgba(210, 162, 68, .22); --clr-line-strong: rgba(210, 162, 68, .45); --clr-line-ink: rgba(31, 22, 16, .14); --clr-glass: rgba(23, 16, 9, .58); --clr-glass-lite: rgba(250, 244, 236, .82); --clr-glass-brd: rgba(239, 201, 122, .18); /* ---- Status ---- */ --clr-open: #8FBF4F; --clr-closed: #F7A072; --clr-error: #FF8A6B; /* ---- Type families ---- */ --ff-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif; --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ff-deva: "Tiro Devanagari Hindi", "Nirmala UI", serif; /* ---- Fluid type scale (1.25 minor third @ mobile -> 1.333 @ desktop) ---- */ --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --fs-sm: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem); --fs-base: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); --fs-md: clamp(1.14rem, 1.07rem + 0.34vw, 1.35rem); --fs-lg: clamp(1.35rem, 1.22rem + 0.62vw, 1.85rem); --fs-xl: clamp(1.65rem, 1.40rem + 1.20vw, 2.60rem); --fs-2xl: clamp(2.05rem, 1.55rem + 2.40vw, 3.80rem); --fs-3xl: clamp(2.60rem, 1.60rem + 4.60vw, 5.60rem); --fs-hero: clamp(3.00rem, 1.40rem + 7.60vw, 7.40rem); /* ---- Spacing (8px base) ---- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-section: clamp(4rem, 2rem + 9vw, 9rem); /* ---- Layout ---- */ --container: 1240px; --container-narrow: 820px; --gutter: clamp(1.15rem, 4vw, 3rem); /* ---- Radii ---- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-pill: 999px; /* ---- Multi-layer shadows (min. 3 layers each: contact + ambient + cast) --- */ --sh-1: 0 1px 2px rgba(8, 4, 2, .40), 0 4px 10px rgba(8, 4, 2, .28), 0 12px 28px rgba(8, 4, 2, .18); --sh-2: 0 1px 2px rgba(8, 4, 2, .46), 0 6px 16px rgba(8, 4, 2, .34), 0 20px 44px rgba(8, 4, 2, .26), 0 40px 80px rgba(8, 4, 2, .16); --sh-3: 0 2px 4px rgba(8, 4, 2, .52), 0 10px 26px rgba(8, 4, 2, .40), 0 30px 64px rgba(8, 4, 2, .30), 0 60px 120px rgba(8, 4, 2, .22); /* ember-tinted elevation for brand surfaces */ --sh-ember: 0 1px 2px rgba(8, 4, 2, .45), 0 8px 20px rgba(122, 45, 15, .34), 0 22px 50px rgba(226, 103, 58, .22), 0 0 70px rgba(226, 103, 58, .14); --sh-brass: 0 1px 2px rgba(8, 4, 2, .40), 0 6px 16px rgba(122, 45, 15, .28), 0 18px 40px rgba(210, 162, 68, .18), 0 0 60px rgba(210, 162, 68, .12); /* on light surfaces */ --sh-lite: 0 1px 2px rgba(74, 42, 20, .10), 0 6px 16px rgba(74, 42, 20, .08), 0 18px 40px rgba(74, 42, 20, .07); --sh-lite-2: 0 2px 4px rgba(74, 42, 20, .12), 0 10px 26px rgba(74, 42, 20, .10), 0 28px 60px rgba(74, 42, 20, .09); --sh-inset: inset 0 1px 0 rgba(239, 201, 122, .12); /* ---- Motion ---- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --ease-soft: cubic-bezier(.34, 1.2, .64, 1); --d-fast: 160ms; --d-base: 240ms; --d-slow: 420ms; --d-rise: 780ms; /* ---- Z-index scale ---- */ --z-base: 1; --z-raised: 10; --z-sticky: 20; --z-header: 30; --z-dock: 40; --z-overlay: 50; --z-modal: 60; /* ---- Texture: clay grain (inline SVG turbulence, no network request) ---- */ --tx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* Honour reduced-motion at the token level so it cascades everywhere. */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-rise: 1ms; } }