/* ============================================================= SAMYA.TATTWA — DESIGN TOKENS (v1) Drop this in your app and reference the variables app-wide. Sampled from the Tattwa logo + HinduPACT brand. ============================================================= */ :root{ /* ---- Brand: Tattwa Red (primary) ---- */ --red-50:#FCEAEC; --red-100:#F8D2D6; --red-200:#F0A6AD; --red-300:#E87B84; --red-400:#DB4F5B; --red-500:#C12838; --red-600:#A81F2E; --red-700:#871824; --red-800:#66121B; --red-900:#450C12; --vermillion:#D34034; /* HinduPACT red sibling */ /* ---- Brand: Sky Blue (secondary) ---- */ --blue-50:#E8F5FC; --blue-100:#CDEAF8; --blue-200:#9CD5F1; --blue-300:#6BBFEA; --blue-400:#4AB1E3; --blue-500:#30A4DC; --blue-600:#1E8AC0; --blue-700:#176E9A; --blue-800:#115274; --blue-900:#0A374E; /* ---- Ink / Maroon ---- */ --maroon:#794344; --ink-900:#2B2122; --ink-800:#3A2D2E; --ink-700:#4E3D3E; --ink:#3A2D2E; --muted:#8C7B79; --faint:#B6A9A7; /* ---- Warm neutrals / paper ---- */ --paper:#FFFFFF; --paper-2:#FBF7F6; --paper-3:#F5EDEB; --paper-4:#EFE4E1; --border:#ECDFDC; --border-strong:#E0CFCB; /* ---- Pastel surfaces (friendly, colorful layer) ---- */ --pastel-red:#FBE9EA; --pastel-blue:#E4F1FB; --pastel-amber:#FBEFD7; --pastel-green:#E3F4EA; --pastel-violet:#F0EAF8; --pastel-teal:#E0F2F1; /* ---- Semantic ---- */ --success:#2E9E6B; --success-bg:#E3F4EA; --warning:#D98A1F; --warning-bg:#FBEFD7; --danger:#C12838; --danger-bg:#FBE9EA; --info:#30A4DC; --info-bg:#E4F1FB; /* ---- Capability / category accents (each pillar owns one) ---- */ --cat-bias:#C12838; --cat-bias-soft:#FBE9EA; --cat-bias-border:#F4C9CD; /* red */ --cat-social:#8C5A9E; --cat-social-soft:#F0EAF8; --cat-social-border:#DECCEC; /* violet */ --cat-academic:#2E8E5E; --cat-academic-soft:#E3F4EA; --cat-academic-border:#C2E6D1; /* green */ --cat-research:#1F8A8A; --cat-research-soft:#E0F2F1; --cat-research-border:#BEE3E1; /* teal */ --cat-profiles:#1E8AC0; --cat-profiles-soft:#E4F1FB; --cat-profiles-border:#C5E3F5; /* blue */ --cat-entity:#C2871E; --cat-entity-soft:#FBEFD7; --cat-entity-border:#EFD9AC; /* amber */ /* ---- Type ---- */ --font-body:'Source Sans 3', system-ui, sans-serif; /* UI + body (PRIMARY) */ --font-display:'Source Sans 3', system-ui, sans-serif;/* headings */ --font-round:'Baloo 2', system-ui, sans-serif; /* wordmark / friendly accent */ --font-mono:'IBM Plex Mono', ui-monospace, monospace; /* IDs, scores, timestamps */ /* ---- Type scale (px) ---- */ --fs-display:56; --fs-h1:38; --fs-h2:28; --fs-h3:20; --fs-body:16; --fs-label:13; --fs-mono:14; /* ---- Radii ---- */ --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px; --r-full:999px; /* ---- Spacing (4px base) ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; /* ---- Shadows (soft, warm-tinted) ---- */ --sh-sm:0 1px 2px rgba(75,40,40,.06), 0 1px 3px rgba(75,40,40,.05); --sh-md:0 6px 18px rgba(75,40,40,.09), 0 2px 6px rgba(75,40,40,.05); --sh-lg:0 18px 48px rgba(43,33,34,.16), 0 6px 14px rgba(43,33,34,.08); --ring:0 0 0 4px rgba(48,164,220,.18); /* focus ring */ } /* Google Fonts used (load in or via @import): https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&family=Baloo+2:wght@600;700;800&family=IBM+Plex+Mono:wght@500&display=swap */