/* GENERATED by design-system/build-tokens.py from design-system/tokens.json.
   Do not edit by hand: change the token in Figma (Tokens Studio), export, and re-run. */
:root {
  /* ---- core ---- */
  /* color */
  --color-navy: #151d51;
  --color-navy-deep: #18205a;
  --color-navy-light: #24338f;
  --color-royal: #2c3ca8;
  --color-indigo: #2c3dac;
  --color-blue: #3657ff;
  --color-blue-deep: #0059ff;
  --color-violet: #5230b9;
  --color-pink: #cb23ae;
  --color-magenta: #e53dff;
  --color-yellow: #ffea04;
  --color-green: #1eb500;
  --color-sky: #2da5d9;
  --color-teal: #2c8f9c;
  --color-ocean: #2a77b4;
  --color-ink: #17101a;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-paper: #eef0ff;
  --color-paper-alt: #dfe3fb;
  --color-chip: #e6e8f5;
  --color-rule: #d4d7ea;
  --color-rule-soft: #e1e3f0;
  --color-mist: #f3f4fb;
  --color-mist-blue: #e8ecff;
  --color-slate: #5b5f7a;
  --color-slate-dark: #4a4d66;
  --color-slate-darker: #34374f;
  --color-slate-ink: #3a3d58;
  --color-steel: #8a8fa6;
  --color-steel-blue: #7d83a8;
  --color-dot-off: #b9bdd8;
  --color-comic-bg: #c4cad6;
  --color-night: #0d1238;
  --color-lavender: #c9d1ff;
  --color-blush: #ffd2f4;
  --color-gray-500: #555555;
  --color-gray-placeholder: #7b7b7b;
  --color-berry: #b0126f;
  --color-leaf: #11801a;
  /* font.family */
  --font-family-display: "Bangers", "Impact", "Arial Narrow Bold", sans-serif;
  --font-family-body: "Parkinsans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* font.weight */
  --font-weight-regular: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-display: 400;
  /* font.size */
  --font-size-micro: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;
  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-18: 72px;
  --space-24: 96px;
  /* radius */
  --radius-none: 0;
  --radius-pill: 99px;
  --radius-round: 50%;
  /* border-width */
  --border-width-thin: 2px;
  --border-width-default: 3px;
  --border-width-thick: 4px;
  /* motion */
  --motion-fast: 0.12s;
  --motion-slow: 0.6s;

  /* ---- semantic ---- */
  /* surface */
  --surface-page: var(--color-navy);
  --surface-hero-start: var(--color-navy);
  --surface-hero-end: var(--color-navy-light);
  --surface-paper: var(--color-paper);
  --surface-paper-alt: var(--color-paper-alt);
  --surface-card: var(--color-white);
  --surface-chip: var(--color-chip);
  --surface-inverse: var(--color-ink);
  /* text */
  --text-on-dark: var(--color-white);
  --text-on-light: var(--color-ink);
  --text-heading: var(--color-navy);
  --text-body: var(--color-slate-darker);
  --text-soft: var(--color-slate-dark);
  --text-muted: var(--color-slate);
  --text-on-dark-muted: var(--color-lavender);
  --text-link: var(--color-blue);
  --text-highlight: var(--color-yellow);
  --text-error: var(--color-berry);
  --text-success: var(--color-leaf);
  /* action */
  --action-primary: var(--color-blue);
  --action-secondary: var(--color-pink);
  --action-success: var(--color-green);
  --action-ink: var(--color-ink);
  /* border */
  --border-ink: var(--color-ink);
  --border-divider: var(--color-rule);
  /* focus */
  --focus-ring: var(--color-yellow);
  /* sticker */
  --sticker-fill: var(--color-yellow);
  --sticker-stroke-blue: var(--color-blue-deep);
  --sticker-stroke-pink: var(--color-magenta);
  --sticker-rotate: -6deg;
  --sticker-skew: -10deg;
  --sticker-scale-y: 0.92;
  --sticker-stroke-width: 14px;
  /* shadow */
  --shadow-offset-1: 1px 1px 0 0 var(--color-ink);
  --shadow-offset-3: 3px 3px 0 0 var(--color-ink);
  --shadow-offset-4: 4px 4px 0 0 var(--color-ink);
  --shadow-offset-5: 5px 5px 0 0 var(--color-ink);
  --shadow-offset-6: 6px 6px 0 0 var(--color-ink);
  --shadow-offset-7: 7px 7px 0 0 var(--color-ink);
  --shadow-offset-8: 8px 8px 0 0 var(--color-ink);
  --shadow-offset-9: 9px 9px 0 0 var(--color-ink);
  --shadow-button-ink: 4px 4px 0 0 var(--color-blue);
  --shadow-button-ink-hover: 6px 6px 0 0 var(--color-blue);
  --shadow-panel-blue: 9px 9px 0 0 var(--color-blue);
  /* layout */
  --layout-canvas: 1440;
  --layout-canvas-max: 1920px;
  --layout-content-width: 1100px;
  --layout-gutter: 20px;
  --layout-title-clip: 38px;
  /* text-style */
  --text-style-nav-font-family: var(--font-family-display);
  --text-style-nav-font-weight: var(--font-weight-display);
  --text-style-nav-font-size: var(--font-size-3xl);
  --text-style-nav-line-height: 1;
  --text-style-nav-letter-spacing: 0;
  --text-style-nav-text-transform: uppercase;
  --text-style-button-font-family: var(--font-family-display);
  --text-style-button-font-weight: var(--font-weight-display);
  --text-style-button-font-size: var(--font-size-xl);
  --text-style-button-line-height: 1;
  --text-style-button-letter-spacing: 0;
  --text-style-button-text-transform: uppercase;
  --text-style-section-title-font-family: var(--font-family-display);
  --text-style-section-title-font-weight: var(--font-weight-display);
  --text-style-section-title-font-size: 42px;
  --text-style-section-title-line-height: 1;
  --text-style-section-title-letter-spacing: 0.01em;
  --text-style-section-title-text-transform: uppercase;
  --text-style-body-font-family: var(--font-family-body);
  --text-style-body-font-weight: var(--font-weight-regular);
  --text-style-body-font-size: var(--font-size-base);
  --text-style-body-line-height: 1.5;
  --text-style-body-strong-font-family: var(--font-family-body);
  --text-style-body-strong-font-weight: var(--font-weight-bold);
  --text-style-body-strong-font-size: var(--font-size-base);
  --text-style-body-strong-line-height: 1.5;
  --text-style-small-font-family: var(--font-family-body);
  --text-style-small-font-weight: var(--font-weight-medium);
  --text-style-small-font-size: var(--font-size-md);
  --text-style-small-line-height: 1.4;
  --text-style-caption-font-family: var(--font-family-body);
  --text-style-caption-font-weight: var(--font-weight-medium);
  --text-style-caption-font-size: var(--font-size-xs);
  --text-style-caption-line-height: 1.3;
  --text-style-label-font-family: var(--font-family-body);
  --text-style-label-font-weight: var(--font-weight-extrabold);
  --text-style-label-font-size: var(--font-size-xs);
  --text-style-label-line-height: 1;
  --text-style-label-letter-spacing: 0.08em;
  --text-style-label-text-transform: uppercase;
  --text-style-card-title-font-family: var(--font-family-body);
  --text-style-card-title-font-weight: var(--font-weight-extrabold);
  --text-style-card-title-font-size: var(--font-size-lg);
  --text-style-card-title-line-height: 1.2;
  --text-style-product-title-font-family: var(--font-family-body);
  --text-style-product-title-font-weight: var(--font-weight-extrabold);
  --text-style-product-title-font-size: var(--product-title-size-max);
  --text-style-product-title-line-height: 1.1;

  /* ---- component ---- */
  /* button */
  --button-padding-y: 14px;
  --button-padding-x: 22px;
  --button-skew: -9deg;
  --button-font-size: var(--font-size-xl);
  /* page-title */
  --page-title-size-min: 54px;
  --page-title-size-max: 96px;
  /* section-title */
  --section-title-size-min: 30px;
  --section-title-size-max: 42px;
  /* product-title */
  --product-title-size-min: 30px;
  --product-title-size-max: 46px;
  /* chip */
  --chip-padding-y: 11px;
  --chip-padding-x: 18px;
  /* input */
  --input-padding: 14px;
  --input-font-size: var(--font-size-base);
}