/* Colors — exact values transcribed from the Figma file. */
:root{
/* Brand yellow */
--ckr-yellow:#F6CC2F; /* @kind color */
--ckr-yellow-pure:#FFCB00; /* @kind color */
--ckr-yellow-deep:#EAC332; /* @kind color */
--ckr-yellow-300:#FFE173; /* @kind color */
--ckr-yellow-250:#FFE165; /* @kind color */
--ckr-yellow-200:#F5E196; /* @kind color */
--ckr-yellow-190:#F5E194; /* @kind color */
--ckr-yellow-100:#FFF2C2; /* @kind color */
--ckr-yellow-glow:rgba(244,221,136,0.56); /* @kind color */

/* Ink / navy */
--ckr-navy:#192B3F; /* @kind color */
--ckr-navy-700:#253444; /* @kind color */
--ckr-navy-800:#263238; /* @kind color */
--ckr-navy-900:#22252A; /* @kind color */
--ckr-heading:#172C43; /* @kind color */

/* Neutral text */
--ckr-ink:#332F2F; /* @kind color */
--ckr-ink-2:#302F2F; /* @kind color */
--ckr-ink-3:#404040; /* @kind color */
--ckr-ink-4:#2A2A2A; /* @kind color */
--ckr-ink-5:#1C2023; /* @kind color */
--ckr-ink-6:#191818; /* @kind color */
--ckr-black:#000000; /* @kind color */

/* Cool greys */
--ckr-grey-600:#5C6772; /* @kind color */
--ckr-grey-500:#808B9C; /* @kind color */
--ckr-grey-400:#B0BBC6; /* @kind color */
--ckr-grey-300:#CAD2DD; /* @kind color */
--ckr-grey-250:#AEC0CB; /* @kind color */
--ckr-grey-200:#E3E6EA; /* @kind color */
--ckr-grey-150:#ECEEF0; /* @kind color */
--ckr-grey-100:#EBEBEB; /* @kind color */

/* Surfaces */
--ckr-white:#FFFFFF; /* @kind color */
--ckr-bg:#F7F8FF; /* @kind color */
--ckr-bg-warm:#F7F7F9; /* @kind color */

/* Semantic */
--ckr-red:#FF383C; /* @kind color */
--ckr-red-dark:#FF6165; /* @kind color */
--ckr-red-light:#E9152D; /* @kind color */

/* Aliases */
--text-body:var(--ckr-ink); /* @kind color */
--text-muted:var(--ckr-grey-600); /* @kind color */
--text-inverse:var(--ckr-white); /* @kind color */
--text-heading:var(--ckr-navy); /* @kind color */
--surface-page:var(--ckr-bg); /* @kind color */
--surface-card:var(--ckr-white); /* @kind color */
--surface-inverse:var(--ckr-navy); /* @kind color */
--accent-primary:var(--ckr-yellow); /* @kind color */
--accent-contrast:var(--ckr-navy); /* @kind color */
--border-hairline:rgba(176,187,198,0.15); /* @kind color */
}
a{color:var(--ckr-navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--ckr-ink);text-decoration-color:var(--ckr-yellow)}