/* GENERATED by frontend/scripts/generate-tokens.cjs — DO NOT EDIT BY HAND.
   Source of truth: frontend/packages/design-system/src/ (regenerate: `yarn --cwd frontend tokens`).

   The tokens of the Rails markup: the .kl wrapper, the toast region and the cookie consent. */
@layer tokens, base, components, pages;

@layer tokens {
  .kl,
  .kl__toast-region,
  .kl__consent {
    /* palette */
    --paper: #FFFFFF;
    --mist: #F4F9FD;
    --sky: #EEF6FC;
    --blush: #F8F1F3;
    --blush-glow: #F6E6EA;
    --blush-card: #F8EDF0;
    --border: #ECE3E6;
    --ink: #1B1424;
    --ink-soft: #453A54;
    --muted: #6A5F76;
    --accent: #7A2338;
    --accent-dark: #5E1A2B;
    --accent-bright: #9A3550;
    --accent-deep: #5A1829;
    --accent-pale: #E6CDD3;
    --link: #2F6A93;
    --link-hover: #1F4D6E;
    --white: #ffffff;
    --success: #2E7D32;
    --success-light: #4CAF50;
    --success-dark: #1B5E20;
    --success-bg: #E7F4E8;
    --success-bd: #BFE0C2;
    --warning: #B45309;
    --warning-bg: #FBF0DE;
    --warning-bd: #EBD3A8;
    --error: #8f2d23;
    --error-bg: #fdecea;
    --error-bd: #f5c6c0;
    --info: #154a6b;
    --info-bg: #EAF4FB;
    --info-bd: #CADEEC;

    /* scales */
    --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --text-3xs: 0.65625rem;
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.875rem;
    --text-base: 0.9375rem;
    --text-lg: 1rem;
    --text-xl: 1.0625rem;
    --heading-xs: 1.125rem;
    --heading-sm: 1.25rem;
    --heading-md: 1.375rem;
    --heading-lg: 1.5rem;
    --heading-xl: 1.75rem;
    --heading-2xl: 2.125rem;
    --heading-3xl: 2.5rem;
    --heading-hero: 4rem;
    --heading-page: clamp(2rem, 4vw, 2.75rem);
    --heading-section: clamp(1.6rem, 3vw, 2rem);
    --tracking-tight: -0.01em;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.1em;
    --tracking-caps: 0.16em;
    --tracking-widest: 0.28em;
    --radius-button: 999px;
    --radius-pill: 999px;
    --radius-field: 14px;
    --radius-panel: 16px;
    --radius-card: 20px;
    --radius-sheet: 24px;
    --radius-media: 0;
    --radius-mark: 4px;
    --duration-fast: 0.15s;
    --duration-base: 0.2s;
    --duration-slow: 0.32s;
    --ease-standard: ease;
    --ease-out: ease-out;
    --ease-spring: cubic-bezier(0.18, 0.86, 0.24, 1);
    --ease-decelerate: cubic-bezier(0.32, 0.72, 0.28, 1);

    /* theme */
    --atmosphere: radial-gradient(900px 500px at 85% 10%, var(--blush-glow) 0%, transparent 70%), linear-gradient(180deg, var(--sky) 0%, var(--blush) 55%, var(--paper) 100%);
    --atmosphere-landing: radial-gradient(900px 500px at 85% 6%, var(--blush-glow) 0%, transparent 70%), linear-gradient(180deg, var(--sky) 0%, var(--blush) 40%, var(--paper) 100%);
    --atmosphere-landing-phone: radial-gradient(500px 360px at 90% 4%, var(--blush-glow) 0%, transparent 70%), linear-gradient(180deg, var(--sky) 0%, var(--blush) 40%, var(--paper) 100%);
    --atmosphere-cool: linear-gradient(180deg, var(--sky) 0%, var(--mist) 40%, var(--paper) 100%);
    --atmosphere-configurator: radial-gradient(1100px 520px at 50% -10%, color-mix(in srgb, var(--link) 14%, var(--sky)) 0%, transparent 68%), radial-gradient(700px 360px at 92% 2%, color-mix(in srgb, var(--link) 6%, var(--sky)) 0%, transparent 70%), linear-gradient(180deg, var(--sky) 0%, var(--mist) 46%, transparent 100%);
    --glass-fill: linear-gradient(135deg, color-mix(in srgb, var(--paper) 72%, transparent), color-mix(in srgb, var(--paper) 38%, transparent));
    --glass-fill-strong: linear-gradient(135deg, color-mix(in srgb, var(--paper) 82%, transparent), color-mix(in srgb, var(--paper) 50%, transparent));
    --glass-fill-cool: linear-gradient(135deg, color-mix(in srgb, var(--paper) 80%, transparent), color-mix(in srgb, var(--sky) 50%, transparent));
    --glass-tint: color-mix(in srgb, var(--paper) 60%, transparent);
    --glass-tint-strong: color-mix(in srgb, var(--paper) 85%, transparent);
    --glass-edge: color-mix(in srgb, var(--paper) 95%, transparent);
    --glass-blur: blur(16px);
    --glass-blur-sm: blur(12px);
    --glass-blur-xs: blur(2px);
    --scrim: color-mix(in srgb, var(--ink) 28%, transparent);
    --gradient-action: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 48%, var(--accent-deep) 100%);
    --gradient-action-soft: linear-gradient(135deg, var(--accent-bright), var(--accent));
    --gradient-selected: linear-gradient(135deg, color-mix(in srgb, var(--link) 50%, var(--white)) 0%, color-mix(in srgb, var(--link) 68%, var(--white)) 55%, color-mix(in srgb, var(--link) 78%, var(--white)) 100%);
    --gradient-stone: linear-gradient(145deg, var(--paper) 0%, var(--blush-card) 55%, var(--sky) 100%);
    --gradient-stone-cool: linear-gradient(145deg, var(--paper) 0%, var(--mist) 55%, var(--sky) 100%);
    --gradient-dialog: linear-gradient(180deg, var(--paper) 0%, var(--blush) 100%);
    --line-control: color-mix(in srgb, var(--muted) 75%, var(--white));
    --focus-ring-error: 0 0 0 3px color-mix(in srgb, var(--error) 16%, transparent);
    --shadow-action: inset 0 1px 0 color-mix(in srgb, var(--paper) 28%, transparent), 0 14px 28px -14px color-mix(in srgb, var(--accent) 75%, transparent);
    --highlight: inset 0 1px 0 color-mix(in srgb, var(--paper) 90%, transparent);
    --ink-disabled: color-mix(in srgb, var(--muted) 45%, transparent);

    /* the warm tone */
    --tone: var(--accent);
    --tone-strong: var(--accent-dark);
    --tone-pale: var(--accent-pale);
  }

  /* The recipes of the tone, on every element: a subtree that sets --tone re-tints them. */
  .kl,
  .kl *,
  .kl__toast-region,
  .kl__toast-region *,
  .kl__consent,
  .kl__consent * {
    --line-faint: color-mix(in srgb, var(--tone) 10%, transparent);
    --line: color-mix(in srgb, var(--tone) 14%, transparent);
    --line-strong: color-mix(in srgb, var(--tone) 28%, transparent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--tone) 16%, transparent);
    --shadow-xs: 0 2px 6px -2px color-mix(in srgb, var(--tone) 45%, transparent);
    --shadow-sm: 0 8px 20px -14px color-mix(in srgb, var(--tone) 55%, transparent);
    --shadow-md: 0 10px 24px -18px color-mix(in srgb, var(--tone) 50%, transparent);
    --shadow-lg: 0 16px 36px -26px color-mix(in srgb, var(--tone) 45%, transparent);
    --shadow-xl: 0 24px 60px -30px color-mix(in srgb, var(--tone) 55%, transparent);
    --shadow-sheet: 0 -16px 40px -30px color-mix(in srgb, var(--tone) 55%, transparent);
  }

  /* The tones as classes: the accent of the links, lines, shadows and focus rings of a subtree. */
  .ms-tone-warm {
    --tone: var(--accent);
    --tone-strong: var(--accent-dark);
    --tone-pale: var(--accent-pale);
  }
  .ms-tone-cool {
    --tone: var(--link);
    --tone-strong: var(--link-hover);
    --tone-pale: color-mix(in srgb, var(--link) 30%, transparent);
  }
}