/* Anjal design tokens — generated from tokens.json. Do not edit by hand. */ /* Four themes. Set data-theme on ; Paper is the default. */ @import url("/fonts/lipi.css"); /* LiPi Sans — self-hosted, 10 scripts, no third-party request */ /* Paper */ :root, [data-theme="paper"] { --surface-000: #eee7db; --surface-100: #fbf8f3; --surface-200: #ffffff; --surface-300: #ece4d6; --surface-inset: #f0eade; --ink: #1f1c18; --ink-muted: #55504a; --ink-subtle: #6c665e; --ink-inverse: #fbf8f3; --line: #ded5c4; --line-strong: #847b6a; --brand: #b02f22; --brand-hover: #8f2418; --brand-soft: #f8e2dd; --on-brand: #fff7f4; --accent: #8a6210; --accent-soft: #f7ead0; --on-accent: #fffaf0; --focus-ring: #1552b0; --success: #1f5f80; --success-soft: #dcecf3; --on-success: #f6fcff; --warning: #7d5407; --warning-soft: #f8ebc9; --on-warning: #fffaef; --danger: #a02418; --danger-soft: #f8ded9; --on-danger: #fff8f6; --info: #4a4a8f; --info-soft: #e5e5f6; --on-info: #fafaff; --label-1: #c2452c; --label-1-soft: #f4e1d9; --label-2: #2a6fbe; --label-2-soft: #e0e6ec; --label-3: #a87c00; --label-3-soft: #f0e8d3; --label-4: #c0367f; --label-4-soft: #f3dfe4; --label-5: #3f7d18; --label-5-soft: #e3e8d7; --label-6: #7a44b8; --label-6-soft: #eae1eb; --label-7: #9c5518; --label-7-soft: #efe3d7; --label-8: #00908a; --label-8-soft: #daeae5; --shadow-sm: 0 1px 2px rgba(31, 28, 24, 0.10); --shadow-md: 0 6px 16px rgba(31, 28, 24, 0.12); --shadow-lg: 0 18px 40px rgba(31, 28, 24, 0.18); } /* Ink */ [data-theme="ink"] { --surface-000: #131110; --surface-100: #1c1917; --surface-200: #252119; --surface-300: #312b22; --surface-inset: #16130f; --ink: #f4eee4; --ink-muted: #c0b8ab; --ink-subtle: #9e9689; --ink-inverse: #1c1917; --line: #332d25; --line-strong: #857c6c; --brand: #e8604c; --brand-hover: #f4735f; --brand-soft: #3b1f1a; --on-brand: #2a0f0a; --accent: #dfa63e; --accent-soft: #372a12; --on-accent: #2a1e07; --focus-ring: #6fabff; --success: #6dc7e8; --success-soft: #122b36; --on-success: #06181f; --warning: #e3b155; --warning-soft: #332611; --on-warning: #2a1e07; --danger: #f0796a; --danger-soft: #3a1b16; --on-danger: #2c100c; --info: #a3a6f0; --info-soft: #1e1e3a; --on-info: #101026; --label-1: #e06348; --label-1-soft: #432821; --label-2: #4a8fdd; --label-2-soft: #25313f; --label-3: #b8871c; --label-3-soft: #3b2f18; --label-4: #d9609d; --label-4-soft: #422732; --label-5: #6ea233; --label-5-soft: #2c341d; --label-6: #8f74e0; --label-6-soft: #332b3f; --label-7: #bb7431; --label-7-soft: #3c2b1c; --label-8: #1ea294; --label-8-soft: #1c3430; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.7); } /* Postcard */ [data-theme="postcard"] { --surface-000: #e3d6be; --surface-100: #f2e9d7; --surface-200: #f9f2e4; --surface-300: #e6dac2; --surface-inset: #ebe0c7; --ink: #2a2318; --ink-muted: #584e3d; --ink-subtle: #6e6453; --ink-inverse: #f9f2e4; --line: #d5c6a7; --line-strong: #7f735c; --brand: #a32a1d; --brand-hover: #851f14; --brand-soft: #f0d9cf; --on-brand: #fff7f2; --accent: #7f5a0a; --accent-soft: #efdfba; --on-accent: #fffaef; --focus-ring: #14509f; --success: #1c5875; --success-soft: #d4e6ee; --on-success: #f6fcff; --warning: #734c05; --warning-soft: #f0e0b4; --on-warning: #fffaef; --danger: #93200f; --danger-soft: #f0d5cb; --on-danger: #fff8f5; --info: #454486; --info-soft: #dedef0; --on-info: #fafaff; --label-1: #c2452c; --label-1-soft: #ebd0bd; --label-2: #2a6fbe; --label-2-soft: #d4d7d3; --label-3: #a87c00; --label-3-soft: #e7d9b7; --label-4: #c0367f; --label-4-soft: #eaceca; --label-5: #3f7d18; --label-5-soft: #d7d9ba; --label-6: #7a44b8; --label-6-soft: #e0d0d2; --label-7: #9c5518; --label-7-soft: #e5d3ba; --label-8: #00908a; --label-8-soft: #cedccb; --shadow-sm: 0 1px 2px rgba(42, 35, 24, 0.12); --shadow-md: 0 6px 16px rgba(42, 35, 24, 0.14); --shadow-lg: 0 18px 40px rgba(42, 35, 24, 0.2); } /* Midnight */ [data-theme="midnight"] { --surface-000: #0b0f17; --surface-100: #121926; --surface-200: #1a2233; --surface-300: #243049; --surface-inset: #0d1320; --ink: #e9eefc; --ink-muted: #b3bfd8; --ink-subtle: #8f9cb8; --ink-inverse: #121926; --line: #222c42; --line-strong: #7b88a6; --brand: #f2705c; --brand-hover: #ff8471; --brand-soft: #37201d; --on-brand: #2c100b; --accent: #e8b552; --accent-soft: #332911; --on-accent: #2a1e07; --focus-ring: #7cb2ff; --success: #6fcdf0; --success-soft: #102834; --on-success: #06181f; --warning: #e8b95e; --warning-soft: #322710; --on-warning: #2a1e07; --danger: #f5836f; --danger-soft: #371a16; --on-danger: #2c100b; --info: #a8abf5; --info-soft: #1c1c38; --on-info: #101026; --label-1: #e06348; --label-1-soft: #3b282d; --label-2: #4a8fdd; --label-2-soft: #1d314b; --label-3: #b8871c; --label-3-soft: #332f24; --label-4: #d9609d; --label-4-soft: #3a273e; --label-5: #6ea233; --label-5-soft: #243429; --label-6: #8f74e0; --label-6-soft: #2b2b4b; --label-7: #bb7431; --label-7-soft: #342b28; --label-8: #1ea294; --label-8-soft: #14343c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.65); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.75); } /* Scale — the same in every theme */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 999px; --opacity-disabled: 0.45; --opacity-scrim: 0.55; --font-display: "LiPi Sans", system-ui, sans-serif; --font-sans: "LiPi Sans", system-ui, -apple-system, sans-serif; --font-tamil: "LiPi Sans", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Type scale — apply as classes, or copy the declarations */ /* Display */ .display-lg { font-family: var(--font-display); font-size: 40px; line-height: 42px; font-weight: 700; letter-spacing: -0.028em; } .display-md { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.022em; } .display-sm { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.014em; } /* Text */ .title { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; } .body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; } .body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; } .subject-unread { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 700; } .label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; } .caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; } .overline { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; } /* Mono */ .mono-body { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; } .mono-sm { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 400; } /* Tamil */ .tamil-display { font-family: var(--font-tamil); font-size: 34px; line-height: 44px; font-weight: 600; } .tamil-body { font-family: var(--font-tamil); font-size: 16px; line-height: 26px; font-weight: 400; } /* The favourite mark — the seal's own letter, set bare */ .anjal-fav { font-family: var(--font-tamil); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--line-strong); user-select: none; } .anjal-fav.is-set { color: var(--brand); } /* Focus — never remove this, never make it dashed */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }