/* ============================================================================ TOKENS — Dr. Santosh Kumar Verma / Dev Homoeopharmacy The dispensary in daylight (spec: docs/superpowers/specs/2026-08-17-…md §2). Warm cream paper, deep forest ink, sage rules, and the logo's saffron and vermilion appearing rarely and small — marigold against foliage. Every semantic token NAME from the first system survives; only values changed, so older sheets keep resolving during integration. Colour discipline (binding): · saffron #FDEB01 is NEVER text or a fill on cream (1.16:1) — it lives only on deep forest (11.52:1) or inside the logo itself · vermilion is the ONLY "act now" colour: #D62B0A fills, #B93A0E small text · body-role text targets ≥7:1 on its ground; nothing meaningful below 4.5:1 ========================================================================== */ :root { /* ---- Primitives: ink (green-black family now) ------------------------- */ --ink-950: #0A1F14; /* forest-black — film frames, deepest marks */ --ink-900: #12241A; /* display ink — 15.7:1 on cream */ --ink-800: #1F2A22; /* body ink — 13.97:1 on cream */ --ink-700: #33402F; --ink-600: #44523F; /* secondary text — 7.8:1 */ --ink-500: #5C6753; /* captions — 5.5:1, sparing */ --ink-400: #7C8F6E; /* deep sage — control borders (≥3:1) */ --ink-300: #A8B79A; /* sage — decorative rules ONLY, never text */ --ink-200: #DDE3D2; /* hairlines on cream */ --ink-100: #EAF0E2; /* ---- Primitives: paper ------------------------------------------------ */ --paper-050: #FDFBF3; /* raised: cards, mats, form fields */ --paper-100: #FBF8EC; /* the page — warm cream */ --paper-200: #F2F8EE; /* leaf tint — alternate bands */ --paper-300: #F3EEDC; /* aged cream — quiet panels, cred card */ --paper-400: #EAE4CE; /* ---- Primitives: brand ink -------------------------------------------- */ --saffron-500: #FDEB01; /* the logo — on forest or inside the seal only */ --saffron-600: #E2C900; --saffron-700: #B89F1C; --saffron-800: #8C6D1F; --saffron-900: #6B5412; /* text-safe gold on cream (7.2:1) if ever needed */ --vermilion-500: #FA310C; /* the logo — graphics and large-bold only */ --vermilion-600: #D62B0A; /* action fills (white 600 labels on it) */ --vermilion-700: #B93A0E; /* action text on cream — 5.37:1 */ --vermilion-800: #93300E; --amber-500: #D4791E; /* cooled saffron — stars, buds, marks; not text */ --tulsi-500: #4C8040; --tulsi-600: #3D6B34; /* availability text — 5.9:1 */ --tulsi-700: #2F5428; /* success text — 7.9:1 */ /* ---- Semantic: surfaces ----------------------------------------------- */ --surface-page: var(--paper-100); --surface-raised: var(--paper-050); --surface-sunken: var(--paper-200); --surface-aged: var(--paper-300); --surface-plate: #06321C; /* deep forest — the footer, and only it */ --surface-plate-raised: #0A3E24; /* ---- Semantic: text --------------------------------------------------- */ --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-600); --text-faint: var(--ink-500); --text-on-plate: var(--paper-100); /* cream on forest — 13.33:1 */ --text-on-plate-muted: #CBD8C4; /* 9.56:1 on forest */ --text-accent: var(--vermilion-700); --text-accent-warm: var(--saffron-900); /* ---- Semantic: lines -------------------------------------------------- */ --rule-hair: 1px solid var(--ink-200); --rule-mid: 1px solid var(--ink-300); --rule-strong: 2px solid #06321C; --rule-accent: 2px solid var(--vermilion-600); --rule-on-plate: 1px solid rgb(251 248 236 / 0.18); /* Certificate frame — the credential idiom of the whole redesign: outer forest rule + inner sage rule, one breath apart. */ --frame-outer: 2px solid #06321C; --frame-inner: 1px solid var(--ink-300); /* ---- Semantic: interactive -------------------------------------------- */ --action-bg: var(--vermilion-600); --action-bg-hover: var(--vermilion-700); --action-fg: var(--paper-050); --action-ghost-fg: var(--ink-800); --focus-ring: var(--vermilion-700); --focus-ring-on-plate: var(--saffron-500); /* WhatsApp keeps its own recognisable green — in India it IS the booking affordance. Deepened hover per spec. */ --whatsapp: #24A55E; --whatsapp-deep: #128C4A; /* ---- Space: 4pt scale, semantic names --------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; --section-y: clamp(3.5rem, 8vw, 7.5rem); --gutter: clamp(1.25rem, 5vw, 3rem); --measure: 68ch; --measure-tight: 46ch; --shell: 78rem; --shell-narrow: 52rem; /* ---- Type scale — fluid, ratio ~1.28 ---------------------------------- step-0 floors at 17px Latin; Devanagari rides a size boost in base.css. */ --step--2: clamp(0.75rem, 0.72rem + 0.14vw, 0.82rem); --step--1: clamp(0.875rem, 0.84rem + 0.17vw, 0.95rem); --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem); --step-1: clamp(1.32rem, 1.24rem + 0.40vw, 1.60rem); --step-2: clamp(1.66rem, 1.50rem + 0.78vw, 2.20rem); --step-3: clamp(2.05rem, 1.76rem + 1.44vw, 3.05rem); --step-4: clamp(2.55rem, 2.00rem + 2.70vw, 4.35rem); --step-5: clamp(3.10rem, 2.10rem + 4.90vw, 6.40rem); --leading-tight: 1.08; --leading-snug: 1.22; --leading-body: 1.6; --leading-loose: 1.78; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-label: 0.14em; /* Latin caps labels only — never Devanagari */ /* ---- Radii ------------------------------------------------------------ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px; /* ---- Elevation --------------------------------------------------------- The seal keeps the deepest shadow (softened ~55% from the dark era). Cards and photographs are allowed the quiet lift; nothing else floats. */ --shadow-seal: 0 1px 2px rgb(18 36 26 / 0.10), 0 6px 14px rgb(18 36 26 / 0.10), 0 16px 34px rgb(18 36 26 / 0.08); --shadow-seal-pressed: 0 1px 1px rgb(18 36 26 / 0.14), 0 3px 6px rgb(18 36 26 / 0.09); --shadow-lift: 0 1px 2px rgb(31 42 34 / 0.06), 0 6px 18px rgb(31 42 34 / 0.07); /* ---- Motion ----------------------------------------------------------- */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-instant: 110ms; --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 480ms; --dur-entrance: 720ms; --dur-stamp: 900ms; --z-plate: 1; --z-header: 60; --z-fab: 70; --z-lightbox: 90; --z-curtain: 100; }