/** * Koala Design System tokens. * * Manually mapped through Package C on 2026-08-11 from koala-design-system * commit 285573acbdfc3c91c1b9f9fbfe275fc116335111. * * Dimension values use a 16 px root equivalence: 16 px = 1 rem. * Primitive tokens remain distinct from semantic aliases. This file does not * add component states, breakpoints, media ratios, overlays, or focus tokens * that are absent from the approved Design System. */ :root { /* Primitive brand colors. */ --koala-color-brand-primary: #003000; --koala-color-brand-secondary: #88d3ab; --koala-color-brand-accent: #e49804; --koala-color-brand-warm: #fcaa94; /* Semantic surface colors. */ --koala-color-surface-primary: #ffffff; --koala-color-surface-secondary: #f7f5ef; --koala-color-surface-tertiary: #f2f2f2; /* Semantic text colors. */ --koala-color-text-primary: #1d1d1d; --koala-color-text-secondary: #5f5f5f; --koala-color-text-inverse: var(--koala-color-surface-primary); /* Semantic border colors. */ --koala-color-border-default: #e5e5e5; --koala-color-border-strong: #d2d2d2; /* Package C semantic feedback and control colors. */ --koala-color-feedback-success: #0c6225; --koala-color-feedback-success-surface: #ecf8ef; --koala-color-feedback-error: #a61414; --koala-color-feedback-error-surface: #feefef; --koala-color-feedback-warning: #7a4900; --koala-color-feedback-warning-surface: #fff8e3; --koala-color-feedback-information: #124986; --koala-color-feedback-information-surface: #ebf4fd; --koala-color-control-focus: var(--koala-color-brand-primary); --koala-color-control-disabled-surface: var(--koala-color-surface-tertiary); --koala-color-control-disabled-text: #6d6d6d; /* Font primitives. DM Sans delivery is intentionally deferred. */ --koala-font-family-brand: "DM Sans", Arial, sans-serif; --koala-font-weight-regular: 400; --koala-font-weight-medium: 500; --koala-font-weight-semibold: 600; --koala-font-weight-bold: 700; /* Typography: display. */ --koala-typography-display-font-family: var(--koala-font-family-brand); --koala-typography-display-font-size: 4rem; --koala-typography-display-font-weight: var(--koala-font-weight-bold); --koala-typography-display-letter-spacing: 0; --koala-typography-display-line-height: 4.5rem; /* Typography: headings. */ --koala-typography-h1-font-family: var(--koala-font-family-brand); --koala-typography-h1-font-size: 3rem; --koala-typography-h1-font-weight: var(--koala-font-weight-bold); --koala-typography-h1-letter-spacing: 0; --koala-typography-h1-line-height: 3.5rem; --koala-typography-h2-font-family: var(--koala-font-family-brand); --koala-typography-h2-font-size: 2.25rem; --koala-typography-h2-font-weight: var(--koala-font-weight-bold); --koala-typography-h2-letter-spacing: 0; --koala-typography-h2-line-height: 2.75rem; --koala-typography-h3-font-family: var(--koala-font-family-brand); --koala-typography-h3-font-size: 1.75rem; --koala-typography-h3-font-weight: var(--koala-font-weight-semibold); --koala-typography-h3-letter-spacing: 0; --koala-typography-h3-line-height: 2.25rem; --koala-typography-h4-font-family: var(--koala-font-family-brand); --koala-typography-h4-font-size: 1.5rem; --koala-typography-h4-font-weight: var(--koala-font-weight-semibold); --koala-typography-h4-letter-spacing: 0; --koala-typography-h4-line-height: 2rem; /* Typography: body and caption. */ --koala-typography-body-large-font-family: var(--koala-font-family-brand); --koala-typography-body-large-font-size: 1.25rem; --koala-typography-body-large-font-weight: var(--koala-font-weight-regular); --koala-typography-body-large-letter-spacing: 0; --koala-typography-body-large-line-height: 1.875rem; --koala-typography-body-default-font-family: var(--koala-font-family-brand); --koala-typography-body-default-font-size: 1rem; --koala-typography-body-default-font-weight: var(--koala-font-weight-regular); --koala-typography-body-default-letter-spacing: 0; --koala-typography-body-default-line-height: 1.5rem; --koala-typography-body-small-font-family: var(--koala-font-family-brand); --koala-typography-body-small-font-size: 0.875rem; --koala-typography-body-small-font-weight: var(--koala-font-weight-regular); --koala-typography-body-small-letter-spacing: 0; --koala-typography-body-small-line-height: 1.25rem; --koala-typography-caption-font-family: var(--koala-font-family-brand); --koala-typography-caption-font-size: 0.75rem; --koala-typography-caption-font-weight: var(--koala-font-weight-medium); --koala-typography-caption-letter-spacing: 0; --koala-typography-caption-line-height: 1rem; /* Spacing primitives. */ --koala-space-1: 0.25rem; --koala-space-2: 0.5rem; --koala-space-3: 0.75rem; --koala-space-4: 1rem; --koala-space-6: 1.5rem; --koala-space-8: 2rem; --koala-space-12: 3rem; --koala-space-16: 4rem; --koala-space-20: 5rem; --koala-space-24: 6rem; --koala-space-32: 8rem; /* Radius primitives. */ --koala-radius-small: 0.25rem; --koala-radius-medium: 0.5rem; --koala-radius-large: 0.75rem; --koala-radius-x-large: 1rem; --koala-radius-2x-large: 1.5rem; --koala-radius-full: 62.4375rem; /* Elevation primitives. */ --koala-elevation-none: 0 0 0 0 rgb(0 0 0 / 0%); --koala-elevation-raised: 0 0.125rem 0.5rem 0 rgb(29 29 29 / 12%); --koala-elevation-overlay: 0 0.5rem 1.5rem -0.25rem rgb(29 29 29 / 16%), 0 0.125rem 0.5rem 0 rgb(29 29 29 / 8%); /* Motion primitives and semantic transitions. */ --koala-motion-duration-instant: 0ms; --koala-motion-duration-fast: 120ms; --koala-motion-duration-moderate: 200ms; --koala-motion-duration-slow: 320ms; --koala-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --koala-motion-easing-enter: cubic-bezier(0, 0, 0, 1); --koala-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1); --koala-motion-transition-feedback: var(--koala-motion-duration-fast) var(--koala-motion-easing-standard) var(--koala-motion-duration-instant); --koala-motion-transition-default: var(--koala-motion-duration-moderate) var(--koala-motion-easing-standard) var(--koala-motion-duration-instant); --koala-motion-transition-enter: var(--koala-motion-duration-slow) var(--koala-motion-easing-enter) var(--koala-motion-duration-instant); /* Responsive grid reference values. These are not breakpoint tokens. */ --koala-grid-mobile-viewport: 24.375rem; --koala-grid-mobile-columns: 4; --koala-grid-mobile-margin: 1rem; --koala-grid-mobile-gutter: 1rem; --koala-grid-tablet-viewport: 48rem; --koala-grid-tablet-columns: 8; --koala-grid-tablet-margin: 2rem; --koala-grid-tablet-gutter: 1.5rem; --koala-grid-desktop-viewport: 90rem; --koala-grid-desktop-columns: 12; --koala-grid-desktop-margin: 5rem; --koala-grid-desktop-gutter: 1.5rem; }