/* customkaro-tokens.css: the one place that defines CustomKaro type and spacing tokens. Loaded first on every front-end page and inside the shadow-DOM pages. */
:root{
  --ck-coral: #f04a2a;
  /* coral fill for anything that carries text: lightest coral with white text at >= 4.5:1 (4.50). Hover/active one step darker (5.7). Decorative coral stays --ck-coral. */
  --ck-coral-text-bg: #e13210;
  --ck-coral-text-bg-hover: #c42a0c;
  --ck-ink: #1a1816;
  --ck-cream: #f6f4ec;
  --ck-white: #ffffff;
  --ck-ink-muted: rgba(26, 24, 22, 0.7);
  --ck-cream-muted: rgba(246, 244, 236, 0.7);
  --ck-line: rgba(26, 24, 22, 0.15);
  --ck-font-display: "Archivo Black", system-ui, sans-serif;
  --ck-font-body: Hind, system-ui, sans-serif;
  /* font sizes (rem, 16px root) */
  --ck-fs-12: 0.75rem;
  --ck-fs-14: 0.875rem;
  --ck-fs-16: 1rem;
  --ck-fs-18: 1.125rem;
  --ck-fs-20: 1.25rem;
  --ck-fs-24: 1.5rem;
  --ck-fs-30: 1.875rem;
  --ck-fs-36: 2.25rem;
  --ck-fs-48: 3rem;
  --ck-fs-72: 4.5rem;
  /* weights */ --ck-fw-regular: 400; --ck-fw-medium: 500; --ck-fw-semibold: 600; --ck-fw-bold: 700;
  /* tracking */ --ck-ls-display: -0.025em; --ck-ls-caps: 0.025em; --ck-ls-eyebrow: 0.2em;
  /* spacing scale: 4px grid, names follow the Tailwind steps the design is built from */
  --ck-space-0: 0;
  --ck-space-0_5: 0.125rem;
  --ck-space-1: 0.25rem;
  --ck-space-2: 0.5rem;
  --ck-space-3: 0.75rem;
  --ck-space-4: 1rem;
  --ck-space-5: 1.25rem;
  --ck-space-6: 1.5rem;
  --ck-space-8: 2rem;
  --ck-space-10: 2.5rem;
  --ck-space-12: 3rem;
  --ck-space-14: 3.5rem;
  --ck-space-16: 4rem;
  --ck-space-20: 5rem;
  --ck-space-24: 6rem;
  /* semantic spacing: mobile values */
  --ck-container: 1280px; --ck-container-text: 896px; --ck-gutter: var(--ck-space-4); --ck-section-gap: var(--ck-space-10); --ck-page-pad: var(--ck-space-10); --ck-band-pad: var(--ck-space-10);
  --ck-stack-heading: var(--ck-space-3); --ck-stack-text: var(--ck-space-4); --ck-stack-list: var(--ck-space-2); --ck-stack-tight: var(--ck-space-1);
  --ck-card-pad: var(--ck-space-4); --ck-pcard-pad: var(--ck-space-3); --ck-grid-gap: var(--ck-space-3); --ck-form-gap: var(--ck-space-4); --ck-label-gap: var(--ck-space-1); --ck-error-gap: var(--ck-space-1);
  --ck-tap: 2.75rem; --ck-btn-h-sm: 2.75rem; --ck-btn-h-md: 3rem; --ck-btn-h-lg: 3.5rem; --ck-btn-px-sm: var(--ck-space-4); --ck-btn-px-md: var(--ck-space-6); --ck-btn-px-lg: var(--ck-space-8);
  --ck-input-h: 3rem; --ck-input-py: var(--ck-space-3); --ck-input-px: var(--ck-space-4); --ck-pill-py: var(--ck-space-1); --ck-pill-px: var(--ck-space-3); --ck-tab-py: var(--ck-space-3); --ck-tab-px: var(--ck-space-4);
  --ck-acc-pad: var(--ck-space-4); --ck-acc-gap: var(--ck-space-2); --ck-cell-py: var(--ck-space-3); --ck-cell-px: var(--ck-space-3); --ck-notice-py: var(--ck-space-3); --ck-notice-px: var(--ck-space-4);
  --ck-modal-pad: var(--ck-space-5); --ck-toast-py: var(--ck-space-3); --ck-toast-px: var(--ck-space-4); --ck-icon-gap: var(--ck-space-2);
}
@media (min-width: 768px){:root{
  --ck-gutter: var(--ck-space-6); --ck-section-gap: var(--ck-space-14); --ck-page-pad: var(--ck-space-14); --ck-band-pad: var(--ck-space-12); --ck-stack-heading: var(--ck-space-4);
  --ck-card-pad: var(--ck-space-6); --ck-pcard-pad: var(--ck-space-4); --ck-grid-gap: var(--ck-space-6); --ck-cell-px: var(--ck-space-4); --ck-notice-py: var(--ck-space-4); --ck-modal-pad: var(--ck-space-6);
}}
/* type roles: one class per role; the plain tags (h1..h6, p, label, input, th, td ...) get the same values from the base layer in Stage 2 */
.ck-t-display{font-family:var(--ck-font-display);font-weight:400;font-size:3rem;line-height:1;letter-spacing:-0.025em;text-transform:uppercase}
@media (min-width:768px){.ck-t-display{font-size:4.5rem}}
.ck-t-h1{font-family:var(--ck-font-display);font-weight:400;font-size:2.25rem;line-height:1.1;letter-spacing:-0.025em;text-transform:uppercase}
@media (min-width:768px){.ck-t-h1{font-size:3rem}}
.ck-t-h2{font-family:var(--ck-font-display);font-weight:400;font-size:1.5rem;line-height:1.2;letter-spacing:-0.025em;text-transform:uppercase}
@media (min-width:768px){.ck-t-h2{font-size:1.875rem}}
.ck-t-h3{font-family:var(--ck-font-display);font-weight:400;font-size:1.25rem;line-height:1.2;letter-spacing:-0.025em;text-transform:uppercase}
@media (min-width:768px){.ck-t-h3{font-size:1.5rem}}
.ck-t-h4{font-family:var(--ck-font-display);font-weight:400;font-size:1.125rem;line-height:1.2;letter-spacing:-0.025em;text-transform:uppercase}
@media (min-width:768px){.ck-t-h4{font-size:1.25rem}}
.ck-t-h5{font-family:var(--ck-font-body);font-weight:700;font-size:0.875rem;line-height:1.43;letter-spacing:0.025em;text-transform:uppercase}
.ck-t-h6{font-family:var(--ck-font-body);font-weight:700;font-size:0.75rem;line-height:1.33;letter-spacing:0.025em;text-transform:uppercase}
.ck-t-eyebrow{font-family:var(--ck-font-body);font-weight:700;font-size:0.75rem;line-height:1.33;letter-spacing:0.2em;text-transform:uppercase}
.ck-t-lead{font-family:var(--ck-font-body);font-weight:400;font-size:1.125rem;line-height:1.5}
.ck-t-body{font-family:var(--ck-font-body);font-weight:400;font-size:1rem;line-height:1.5}
.ck-t-body-sm{font-family:var(--ck-font-body);font-weight:400;font-size:0.875rem;line-height:1.43}
.ck-t-caption{font-family:var(--ck-font-body);font-weight:400;font-size:0.75rem;line-height:1.33}
.ck-t-label-caps{font-family:var(--ck-font-body);font-weight:700;font-size:0.75rem;line-height:1.33;letter-spacing:0.025em;text-transform:uppercase}
.ck-t-nav{font-family:var(--ck-font-body);font-weight:600;font-size:0.875rem;line-height:1.43}
.ck-t-nav-mobile{font-family:var(--ck-font-body);font-weight:700;font-size:1.125rem;line-height:1.5}
.ck-t-footer-link{font-family:var(--ck-font-body);font-weight:400;font-size:0.875rem;line-height:1.43}
.ck-t-link{font-family:var(--ck-font-body);font-weight:600;font-size:1rem;line-height:1.5}
.ck-t-button-lg{font-family:var(--ck-font-body);font-weight:700;font-size:1rem;line-height:1.5}
.ck-t-button{font-family:var(--ck-font-body);font-weight:700;font-size:0.875rem;line-height:1.43}
.ck-t-button-sm{font-family:var(--ck-font-body);font-weight:700;font-size:0.75rem;line-height:1.33;letter-spacing:0.025em;text-transform:uppercase}
.ck-t-tab{font-family:var(--ck-font-body);font-weight:700;font-size:0.875rem;line-height:1.43;text-transform:uppercase}
.ck-t-field-label{font-family:var(--ck-font-body);font-weight:600;font-size:0.875rem;line-height:1.43}
.ck-t-choice-label{font-family:var(--ck-font-body);font-weight:400;font-size:1rem;line-height:1.5}
.ck-t-input{font-family:var(--ck-font-body);font-weight:400;font-size:1rem;line-height:1.5}
.ck-t-placeholder{font-family:var(--ck-font-body);font-weight:400;font-size:1rem;line-height:1.5}
.ck-t-error{font-family:var(--ck-font-body);font-weight:600;font-size:0.875rem;line-height:1.43}
.ck-t-success{font-family:var(--ck-font-body);font-weight:600;font-size:0.875rem;line-height:1.43}
.ck-t-th{font-family:var(--ck-font-body);font-weight:700;font-size:0.75rem;line-height:1.33;letter-spacing:0.025em;text-transform:uppercase}
.ck-t-td{font-family:var(--ck-font-body);font-weight:400;font-size:0.875rem;line-height:1.43}
.ck-t-td-strong{font-family:var(--ck-font-body);font-weight:700;font-size:0.875rem;line-height:1.43}
.ck-t-price-lg{font-family:var(--ck-font-display);font-weight:400;font-size:1.5rem;line-height:1.2}
.ck-t-price{font-family:var(--ck-font-display);font-weight:400;font-size:1.125rem;line-height:1.2}
.ck-t-price-sm{font-family:var(--ck-font-display);font-weight:400;font-size:0.875rem;line-height:1.4}
.ck-t-price-old{font-family:var(--ck-font-body);font-weight:400;font-size:0.875rem;line-height:1.43}
.ck-t-card-title{font-family:var(--ck-font-display);font-weight:400;font-size:0.875rem;line-height:1.43;letter-spacing:-0.025em;text-transform:uppercase}
.ck-t-faq-q{font-family:var(--ck-font-body);font-weight:600;font-size:1rem;line-height:1.5}
.ck-t-faq-a{font-family:var(--ck-font-body);font-weight:400;font-size:1rem;line-height:1.6}
.ck-t-notice{font-family:var(--ck-font-body);font-weight:400;font-size:0.875rem;line-height:1.43}
.ck-t-modal-title{font-family:var(--ck-font-body);font-weight:700;font-size:1.125rem;line-height:1.5}
.ck-t-modal-body{font-family:var(--ck-font-body);font-weight:400;font-size:0.875rem;line-height:1.5}
.ck-t-toast{font-family:var(--ck-font-body);font-weight:600;font-size:0.875rem;line-height:1.43}
.ck-measure{max-width:70ch}

/* spacing utilities */
.ck-container{max-width:var(--ck-container);margin-inline:auto;padding-inline:var(--ck-gutter)}
.ck-container-text{max-width:var(--ck-container-text);margin-inline:auto;padding-inline:var(--ck-gutter)}
.ck-section{margin-top:var(--ck-section-gap)}
.ck-stack-heading{margin-top:var(--ck-stack-heading)}
.ck-stack-text>*+*{margin-top:var(--ck-stack-text)}
.ck-stack-list>*+*{margin-top:var(--ck-stack-list)}
.ck-card{padding:var(--ck-card-pad)}
.ck-input{min-height:var(--ck-input-h);padding:var(--ck-input-py) var(--ck-input-px)}
.ck-btn-sm{min-height:var(--ck-btn-h-sm);padding-inline:var(--ck-btn-px-sm)}
.ck-btn-md{min-height:var(--ck-btn-h-md);padding-inline:var(--ck-btn-px-md)}
.ck-btn-lg{min-height:var(--ck-btn-h-lg);padding-inline:var(--ck-btn-px-lg)}
