/* ========================================================================== Kular Accounting — design tokens Exported from the "Kular Accounting Design System" Claude Design project. These are the brand's raw values. Change a value here and it updates everywhere on the site. ========================================================================== */ /* -------------------------------------------------------------------------- Typography — Poppins for headings (friendly geometric), Nunito Sans for body (warm, highly readable). The fonts themselves are loaded from Google Fonts in each page's . -------------------------------------------------------------------------- */ :root { --font-display: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif; --font-body: 'Nunito Sans', 'Segoe UI', Helvetica, Arial, sans-serif; --weight-regular: 400; --weight-medium: 500; /* Poppins medium — subheads */ --weight-semibold: 600; --weight-bold: 700; /* Scale (marketing surfaces) */ --size-display: 3.5rem; /* 56 — hero */ --size-h1: 2.75rem; /* 44 */ --size-h2: 2.125rem; /* 34 — section titles */ --size-h3: 1.5rem; /* 24 — card titles */ --size-h4: 1.1875rem; /* 19 */ --size-body-lg: 1.125rem; /* 18 — lead paragraphs */ --size-body: 1rem; /* 16 */ --size-small: .875rem; /* 14 */ --size-eyebrow: .8125rem; /* 13 — uppercase kicker */ --leading-display: 1.08; --leading-heading: 1.18; --leading-body: 1.65; --tracking-display: -0.02em; --tracking-heading: -0.01em; --tracking-eyebrow: 0.14em; } /* -------------------------------------------------------------------------- Colour — one strong teal, near-black ink, white + warm cream surfaces. Keep the palette tight. -------------------------------------------------------------------------- */ :root { /* Base palette */ --teal-700: #0E5A52; /* deep teal — small teal text, pressed states */ --teal-600: #12756B; /* hover, links */ --teal-500: #188B7F; /* PRIMARY brand teal */ --teal-100: #E8F2F0; /* teal tint — highlight surfaces, icon chips */ --teal-50: #F2F8F7; /* faintest tint */ --ink-900: #1A1A1A; /* near-black text */ --ink-600: #4E5B59; /* secondary text (grey-green cast) */ --ink-400: #8A9694; /* muted text, captions */ --neutral-100: #F6EFE1; /* warm cream — alternating section bg */ --sand-100: #F8F4EC; /* warm cream — sparing accent surface */ --white: #FFFFFF; /* Semantic aliases */ --surface-page: var(--white); --surface-soft: var(--neutral-100); --surface-tint: #F0E6D2; --surface-cream: var(--sand-100); --surface-brand: var(--teal-500); --surface-card: var(--white); --text-body: var(--ink-900); --text-secondary: var(--ink-600); --text-muted: var(--ink-400); --text-brand: var(--teal-700); /* teal text at small sizes — #188B7F is large-text only */ --text-on-brand: var(--white); --color-link: var(--teal-600); --color-link-hover: var(--teal-700); --border-soft: #E9E0CE; --border-strong: #D9CDB4; --border-on-brand: rgba(255,255,255,.28); --focus-ring: 0 0 0 3px rgba(24,139,127,.28); } /* -------------------------------------------------------------------------- Spacing, radius, shadow. Generous whitespace is the brand's main "decoration". -------------------------------------------------------------------------- */ :root { --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* default section padding */ --space-32: 8rem; --container: 1120px; --container-narrow: 760px; /* Soft, pillowy corners */ --radius-sm: 16px; /* inputs, badges */ --radius-md: 22px; /* small cards, chips */ --radius-lg: 30px; /* cards */ --radius-xl: 42px; /* feature panels, CTA bands */ --radius-pill: 999px; /* buttons, tags */ /* Soft, teal-cast shadows — never harsh */ --shadow-sm: 0 1px 2px rgba(15,42,39,.06); --shadow-card: 0 1px 2px rgba(15,42,39,.05), 0 10px 30px -12px rgba(15,42,39,.12); --shadow-lift: 0 2px 6px rgba(15,42,39,.06), 0 18px 44px -16px rgba(15,42,39,.18); } /* -------------------------------------------------------------------------- Base element styles -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--size-body); line-height: var(--leading-body); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--text-body); margin: 0; } p { margin: 0; } a { color: var(--color-link); text-decoration-color: rgba(18,117,107,.4); text-underline-offset: 3px; } a:hover { color: var(--color-link-hover); } img { max-width: 100%; } ::selection { background: var(--teal-100); color: var(--teal-700); } /* Skip link — keyboard users can jump straight to the content */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--white); color: var(--text-brand); font-family: var(--font-display); font-weight: var(--weight-semibold); padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; }