@font-face {
  font-family: "Archivo";
  src: url("./fonts/archivo/Archivo-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("./fonts/archivo/Archivo-Italic-Variable.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --senyal-ink-950: #172036;
  --senyal-paper-050: #faf8f0;
  --senyal-dust-100: #efe7d8;
  --senyal-sand-300: #d8c7a3;
  --senyal-mint-300: #a9c7be;
  --senyal-coral-400: #d58a76;
  --senyal-lavender-300: #aaa7c8;
  --senyal-muted-700: #665f55;
  --senyal-success-700: #2f665a;
  --senyal-warning-700: #8a4e3f;
  --senyal-danger-700: #963e49;

  /* Semantic aliases. Components consume these names, never raw hex values. */
  --senyal-canvas-ink: var(--senyal-ink-950);
  --senyal-canvas-paper: var(--senyal-paper-050);
  --senyal-surface-soft: var(--senyal-dust-100);
  --senyal-surface-accent: var(--senyal-sand-300);
  --senyal-text-on-ink: var(--senyal-paper-050);
  --senyal-text-on-paper: var(--senyal-ink-950);
  --senyal-text-muted: var(--senyal-muted-700);
  --senyal-state-success: var(--senyal-success-700);
  --senyal-state-warning: var(--senyal-warning-700);
  --senyal-state-danger: var(--senyal-danger-700);
  --senyal-border-on-paper: color-mix(in srgb, var(--senyal-ink-950) 18%, transparent);
  --senyal-border-on-ink: color-mix(in srgb, var(--senyal-paper-050) 20%, transparent);
  --senyal-shadow: 0 24px 60px rgba(23, 32, 54, .14);

  /* Compatibility aliases while every product surface migrates to --senyal-*. */
  --ink: var(--senyal-ink-950);
  --ink-soft: #28324a;
  --paper: var(--senyal-paper-050);
  --paper-deep: var(--senyal-dust-100);
  --panel: var(--senyal-dust-100);
  --panel2: var(--senyal-sand-300);
  --cream: var(--senyal-sand-300);
  --acid: var(--senyal-sand-300);
  --mint: var(--senyal-mint-300);
  --coral: var(--senyal-coral-400);
  --lavender: var(--senyal-lavender-300);
  --muted: var(--senyal-muted-700);
  --red: var(--senyal-danger-700);
  --orange: var(--senyal-warning-700);
  --line: var(--senyal-border-on-paper);
  --shadow: var(--senyal-shadow);

  --senyal-font: "Archivo", sans-serif;
  --senyal-radius-structure: 0;
  --senyal-radius-control: 4px;
  --senyal-radius-card: 12px;
  --senyal-radius-media: 24px;
  --senyal-radius-pill: 999px;

  --senyal-space-1: 4px;
  --senyal-space-2: 8px;
  --senyal-space-3: 12px;
  --senyal-space-4: 16px;
  --senyal-space-6: 24px;
  --senyal-space-8: 32px;
  --senyal-space-12: 48px;
  --senyal-space-16: 64px;
  --senyal-space-24: 96px;
  --senyal-space-32: 128px;

  --senyal-motion-fast: 120ms;
  --senyal-motion-state: 180ms;
  --senyal-motion-panel: 240ms;
  --senyal-motion-editorial: 320ms;
  --senyal-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --senyal-ease-out: cubic-bezier(.16, 1, .3, 1);

  --senyal-photo-campaign-opacity: .42;
  --senyal-photo-product-opacity: .16;
  --senyal-photo-product-mobile-opacity: .10;
  --senyal-photo-card-opacity: .26;
  --senyal-photo-ui-opacity: var(--senyal-photo-product-opacity);
  --senyal-photo-ui-mobile-opacity: var(--senyal-photo-product-mobile-opacity);
  --senyal-grain-paper-opacity: .04;
  --senyal-grain-ink-opacity: .025;
  --senyal-grain-photo-opacity: .06;
}

html {
  font-family: var(--senyal-font);
  font-synthesis: none;
}

body,
button,
input,
select,
textarea {
  font-family: var(--senyal-font);
  font-variation-settings: "wght" 450, "wdth" 100;
}

.senyal-type-impact {
  font-family: var(--senyal-font);
  font-style: normal;
  font-weight: 900;
  font-stretch: 72%;
  font-variation-settings: "wght" 900, "wdth" 72;
  letter-spacing: -.055em;
  line-height: .82;
  text-transform: uppercase;
}

.senyal-type-forward {
  font-family: var(--senyal-font);
  font-style: italic;
  font-weight: 850;
  font-stretch: 125%;
  font-variation-settings: "wght" 850, "wdth" 125;
  letter-spacing: -.045em;
  line-height: .88;
}

.senyal-type-micro {
  font-family: var(--senyal-font);
  font-weight: 650;
  font-stretch: 82%;
  font-variation-settings: "wght" 650, "wdth" 82;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.senyal-type-metric {
  font-family: var(--senyal-font);
  font-weight: 750;
  font-stretch: 92%;
  font-variation-settings: "wght" 750, "wdth" 92;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  line-height: 1;
}

.senyal-type-product-heading {
  font-family: var(--senyal-font);
  font-style: normal;
  font-weight: 780;
  font-stretch: 100%;
  font-variation-settings: "wght" 780, "wdth" 100;
  letter-spacing: -.045em;
  line-height: .92;
}

.senyal-cut-12 {
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 6px, 100% 100%, 0 100%);
}

@media (max-width: 760px) {
  .senyal-cut-12 {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 4px, 100% 100%, 0 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 80ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 80ms !important;
  }
}