/* ============================================================================ Jain Chindalia & Co. — Chartered Accountants Foundation tokens: colour + type ---------------------------------------------------------------------------- Warm, subtle, document-like. Built to sit comfortably within ICAI website conduct (restraint over salesmanship; nameplate, never a logo/monogram). Fonts are loaded from Google Fonts — see README "Fonts" (substitution flag). ========================================================================== */ /* ---- Webfonts (substituted — no brand fonts supplied; see README) -------- */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* ---------------------------------------------------------------------- */ /* PALETTE — base ramps */ /* ---------------------------------------------------------------------- */ /* Warm neutral "paper" ground -> ink */ --paper-0: #FCFAF5; /* page background — warm ivory */ --paper-1: #F7F2E8; /* raised panel / alt row */ --paper-2: #EFE8D8; /* muted fill / inset */ --paper-3: #E6DCC8; /* stronger fill */ --line: #E5DBC8; /* hairline border */ --line-strong: #D3C6AC; /* emphasised border / rule */ --ink-1: #26211B; /* primary text — warm near-black */ --ink-2: #574E43; /* secondary text — warm taupe */ --ink-3: #877C6C; /* tertiary text / captions */ --ink-on-dark: #F6F1E7;/* text on seal / dark grounds */ /* Brand — Seal Red (oxblood). Primary identity colour. */ --seal: #6F2C25; --seal-deep: #54201B; --seal-bright: #8A3A30; /* hover / lifted */ --seal-tint: #F1E3DE; /* wash background */ --seal-tint-2: #E7CFC8; /* stronger wash / border on tint */ /* Brand — Brass (muted ochre). Secondary, used sparingly. */ --brass: #A6803C; --brass-deep: #7E5F26; --brass-tint: #F4ECD8; --brass-tint-2:#E9DBB8; /* ---------------------------------------------------------------------- */ /* PALETTE — semantic */ /* ---------------------------------------------------------------------- */ --ok: #3E6B4F; --ok-tint: #E4EEE6; /* ledger green */ --warn: #9C6F1F; --warn-tint: #F6EBD2; /* amber */ --alert: #A2362B; --alert-tint: #F6E0DC; /* alert red */ --info: #3C5A78; --info-tint: #E2E9F1; /* slate blue */ /* ---------------------------------------------------------------------- */ /* SEMANTIC SURFACE TOKENS */ /* ---------------------------------------------------------------------- */ --bg: var(--paper-0); --bg-raised: #FFFFFF; --bg-sunken: var(--paper-1); --surface-card: #FFFFFF; --border: var(--line); --border-strong: var(--line-strong); --text: var(--ink-1); --text-muted: var(--ink-2); --text-subtle: var(--ink-3); --link: var(--seal); --link-hover: var(--seal-bright); --accent: var(--seal); --accent-2: var(--brass); /* ---------------------------------------------------------------------- */ /* TYPE — families */ /* ---------------------------------------------------------------------- */ --font-serif: "Source Serif 4", "Georgia", "Times New Roman", serif; --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace; /* TYPE — fluid display scale (clamp: small screen -> large) */ --fs-display: clamp(2.6rem, 1.6rem + 3.4vw, 4.25rem); /* hero */ --fs-h1: clamp(2.1rem, 1.5rem + 2.1vw, 3rem); --fs-h2: clamp(1.65rem, 1.3rem + 1.3vw, 2.15rem); --fs-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); --fs-h4: 1.18rem; --fs-lead: 1.21rem; /* intro paragraph */ --fs-body: 1.0625rem; /* 17px base */ --fs-small: 0.9375rem; /* 15px */ --fs-caption: 0.8125rem; /* 13px */ --fs-eyebrow: 0.75rem; /* 12px letterspaced label */ --lh-tight: 1.12; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed:1.65; --tracking-eyebrow: 0.16em; --tracking-caps: 0.04em; /* ---------------------------------------------------------------------- */ /* SPACING — 4px base */ /* ---------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10:128px; /* RADII — conservative */ --radius-sm: 2px; --radius: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px; /* status chips only */ /* SHADOWS — very low, warm-tinted; borders do most of the work */ --shadow-xs: 0 1px 2px rgba(57, 41, 28, 0.06); --shadow-sm: 0 1px 3px rgba(57, 41, 28, 0.07), 0 1px 1px rgba(57,41,28,0.04); --shadow-md: 0 6px 18px rgba(57, 41, 28, 0.08); --shadow-lg: 0 18px 44px rgba(57, 41, 28, 0.12); /* MOTION — calm, no bounce */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --container: 1180px; --container-narrow: 760px; } /* ============================================================================ SEMANTIC TYPE PRIMITIVES Use these classes (or copy the rules) — do not re-invent sizes per page. ========================================================================== */ .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brass-deep); } .display { font-family: var(--font-serif); font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.01em; color: var(--text); } h1, .h1 { font-family: var(--font-serif); font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.01em; color: var(--text); } h2, .h2 { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 600; color: var(--text); } h3, .h3 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; color: var(--text); } h4, .h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; letter-spacing: var(--tracking-caps); color: var(--text); } .lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-muted); } body, .body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text); } .small { font-size: var(--fs-small); line-height: var(--lh-normal); } .caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--text-subtle); } /* Tabular figures — amounts, dates, reference & UDIN numbers */ .tabular, .figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--link-hover); }