/* GENERATED from design-system/tokens/tokens.json (v0.1.0). Do not edit by hand; run scripts/build-tokens.mjs. */

:root {
  color-scheme: light;

  /* Brand palette (brand.notino.com) */
  --nt-brand-black: #000000;
  --nt-brand-white: #FFFFFF;
  --nt-brand-strong-pink: #DC0069;
  --nt-brand-yellow-dragon: #F4DC7A;
  --nt-brand-chameleon-skin: #CCDBAA;
  --nt-brand-light-nude: #E8D1BA;
  --nt-brand-light-sky-blue: #B6C1ED;
  --nt-brand-pastel-violine: #CAADEB;
  --nt-brand-light-pink: #F49AC5;
  --nt-brand-light-coral: #FF9380;

  /* Notino e-shop greys */
  --nt-grey-900: #303030;
  --nt-grey-700: #474747;
  --nt-grey-600: #6B6B6B;
  --nt-grey-400: #ABABAB;
  --nt-grey-300: #BFBFBF;
  --nt-grey-200: #E1E1E1;
  --nt-grey-100: #F7F7F7;

  /* Theme roles: light */
  --nt-page: #F7F7F7;
  --nt-card: #FFFFFF;
  --nt-soft: #F2F2F2;
  --nt-side: #FFFFFF;
  --nt-inverse: #000000;
  --nt-on-inverse: #FFFFFF;
  --nt-ink: #000000;
  --nt-ink-2: #474747;
  --nt-muted: #6B6B6B;
  --nt-line: #E1E1E1;
  --nt-line-strong: #8C8C8C;
  --nt-card-border: #EBEBEB;
  --nt-accent: #DC0069;
  --nt-on-accent: #FFFFFF;
  --nt-accent-tint: #FDF0F6;
  --nt-up: #0E7650;
  --nt-down: #C2410C;
  --nt-prev: #858585;
  --nt-warn-bg: #F4DC7A;
  --nt-warn-ink: #000000;
  --nt-focus: #DC0069;
  --nt-skeleton: #E1E1E1;

  /* Data colours: light */
  --nt-data-notino: #DC0069;
  --nt-data-sky: #3F57C0;
  --nt-data-chameleon: #7B9237;
  --nt-data-violine: #A27BCB;
  --nt-data-nude: #85562A;
  --nt-data-other: #8C8C8C;
  --nt-seq-1: #F0F3FF;
  --nt-seq-2: #D4DDFD;
  --nt-seq-3: #B5C1F5;
  --nt-seq-4: #8F9FEA;
  --nt-seq-5: #6D7DDA;
  --nt-seq-6: #505EBE;
  --nt-seq-7: #394393;
  --nt-seq-text-1: #000000;
  --nt-seq-text-2: #000000;
  --nt-seq-text-3: #000000;
  --nt-seq-text-4: #000000;
  --nt-seq-text-5: #000000;
  --nt-seq-text-6: #FFFFFF;
  --nt-seq-text-7: #FFFFFF;

  /* Diverging ramp (index vs. average) */
  --nt-div-1: #673E8D;
  --nt-div-2: #8C66B2;
  --nt-div-3: #B198CD;
  --nt-div-4: #D7CBE6;
  --nt-div-5: #F2F2F2;
  --nt-div-6: #CBD7B3;
  --nt-div-7: #A0B56C;
  --nt-div-8: #7A9136;
  --nt-div-9: #516409;
  --nt-div-text-1: #FFFFFF;
  --nt-div-text-2: #000000;
  --nt-div-text-3: #000000;
  --nt-div-text-4: #000000;
  --nt-div-text-5: #000000;
  --nt-div-text-6: #000000;
  --nt-div-text-7: #000000;
  --nt-div-text-8: #000000;
  --nt-div-text-9: #FFFFFF;

  /* Typography */
  --nt-font-sans: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nt-weight-light: 300;
  --nt-weight-regular: 400;
  --nt-weight-medium: 500;
  --nt-weight-bold: 700;
  --nt-text-caption: 0.75rem;
  --nt-text-caption-lh: 1rem;
  --nt-text-caption-weight: 400;
  --nt-text-caption-tracking: 0em;
  --nt-text-label: 0.75rem;
  --nt-text-label-lh: 1rem;
  --nt-text-label-weight: 500;
  --nt-text-label-tracking: 0em;
  --nt-text-small: 0.875rem;
  --nt-text-small-lh: 1.25rem;
  --nt-text-small-weight: 400;
  --nt-text-small-tracking: 0em;
  --nt-text-body: 1rem;
  --nt-text-body-lh: 1.5rem;
  --nt-text-body-weight: 400;
  --nt-text-body-tracking: 0em;
  --nt-text-card-title: 1rem;
  --nt-text-card-title-lh: 1.25rem;
  --nt-text-card-title-weight: 500;
  --nt-text-card-title-tracking: 0em;
  --nt-text-lead: 1.25rem;
  --nt-text-lead-lh: 1.75rem;
  --nt-text-lead-weight: 300;
  --nt-text-lead-tracking: 0em;
  --nt-text-h3: 1.5rem;
  --nt-text-h3-lh: 1.5rem;
  --nt-text-h3-weight: 400;
  --nt-text-h3-tracking: -0.01em;
  --nt-text-h2: 2rem;
  --nt-text-h2-lh: 2rem;
  --nt-text-h2-weight: 400;
  --nt-text-h2-tracking: -0.015em;
  --nt-text-h1: 2.5rem;
  --nt-text-h1-lh: 2.5rem;
  --nt-text-h1-weight: 300;
  --nt-text-h1-tracking: -0.02em;
  --nt-text-display: 3.5rem;
  --nt-text-display-lh: 3.5rem;
  --nt-text-display-weight: 300;
  --nt-text-display-tracking: -0.02em;
  --nt-text-kpi: 2.25rem;
  --nt-text-kpi-lh: 2.25rem;
  --nt-text-kpi-weight: 400;
  --nt-text-kpi-tracking: -0.01em;
  --nt-text-kpi-sm: 1.5rem;
  --nt-text-kpi-sm-lh: 1.5rem;
  --nt-text-kpi-sm-weight: 400;
  --nt-text-kpi-sm-tracking: -0.01em;

  /* Slide typography (px at 1920 x 1080) */
  --nt-slide-footnote: 18px;
  --nt-slide-footnote-lh: 24px;
  --nt-slide-footnote-weight: 400;
  --nt-slide-footnote-tracking: 0em;
  --nt-slide-body: 28px;
  --nt-slide-body-lh: 40px;
  --nt-slide-body-weight: 400;
  --nt-slide-body-tracking: 0em;
  --nt-slide-body-lg: 36px;
  --nt-slide-body-lg-lh: 48px;
  --nt-slide-body-lg-weight: 300;
  --nt-slide-body-lg-tracking: 0em;
  --nt-slide-title: 56px;
  --nt-slide-title-lh: 56px;
  --nt-slide-title-weight: 400;
  --nt-slide-title-tracking: -0.015em;
  --nt-slide-display: 96px;
  --nt-slide-display-lh: 96px;
  --nt-slide-display-weight: 300;
  --nt-slide-display-tracking: -0.02em;
  --nt-slide-number: 160px;
  --nt-slide-number-lh: 160px;
  --nt-slide-number-weight: 300;
  --nt-slide-number-tracking: -0.03em;

  /* Space, radius, shadow, motion, layout */
  --nt-space-0: 0rem;
  --nt-space-1: 0.25rem;
  --nt-space-2: 0.5rem;
  --nt-space-3: 0.75rem;
  --nt-space-4: 1rem;
  --nt-space-5: 1.25rem;
  --nt-space-6: 1.5rem;
  --nt-space-8: 2rem;
  --nt-space-10: 2.5rem;
  --nt-space-12: 3rem;
  --nt-space-16: 4rem;
  --nt-space-24: 6rem;
  --nt-space-0_5: 0.125rem;
  --nt-radius-none: 0px;
  --nt-radius-xs: 2px;
  --nt-radius-sm: 4px;
  --nt-radius-md: 8px;
  --nt-radius-pill: 999px;
  --nt-shadow-card: 0 1px 2px rgb(71 71 71 / 0.06), 0 4px 8px rgb(71 71 71 / 0.10);
  --nt-shadow-card-hover: 0 1px 2px rgb(71 71 71 / 0.06), 0 6px 12px rgb(71 71 71 / 0.10);
  --nt-shadow-pop: 0 12px 32px -8px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.06);
  --nt-dur-fast: 120ms;
  --nt-dur-base: 200ms;
  --nt-dur-slow: 320ms;
  --nt-ease: cubic-bezier(0.2, 0, 0, 1);
  --nt-appbar-h: 56px;
  --nt-content-max: 1600px;
  --nt-gutter: 24px;
  --nt-gutter-mobile: 16px;
  --nt-logo-appbar-w: 96px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nt-page: #000000;
    --nt-card: #161616;
    --nt-soft: #1F1F1F;
    --nt-side: #0A0A0A;
    --nt-inverse: #000000;
    --nt-on-inverse: #FFFFFF;
    --nt-ink: #FFFFFF;
    --nt-ink-2: #C7C7C7;
    --nt-muted: #9E9E9E;
    --nt-line: #2A2A2A;
    --nt-line-strong: #6E6E6E;
    --nt-card-border: #2A2A2A;
    --nt-accent: #FF4D9A;
    --nt-on-accent: #000000;
    --nt-accent-tint: #371E28;
    --nt-up: #3CC48A;
    --nt-down: #FF8A4C;
    --nt-prev: #7A7A7A;
    --nt-warn-bg: #F4DC7A;
    --nt-warn-ink: #000000;
    --nt-focus: #FF4D9A;
    --nt-skeleton: #262626;
    --nt-data-notino: #FF4D9A;
    --nt-data-sky: #8091E8;
    --nt-data-chameleon: #98B14D;
    --nt-data-violine: #C59BF3;
    --nt-data-nude: #CD8731;
    --nt-data-other: #8A8A8A;
    --nt-seq-1: #222535;
    --nt-seq-2: #2E3557;
    --nt-seq-3: #3E487E;
    --nt-seq-4: #5462AD;
    --nt-seq-5: #6E7ED4;
    --nt-seq-6: #92A2ED;
    --nt-seq-7: #BCC8F9;
    --nt-seq-text-1: #FFFFFF;
    --nt-seq-text-2: #FFFFFF;
    --nt-seq-text-3: #FFFFFF;
    --nt-seq-text-4: #FFFFFF;
    --nt-seq-text-5: #000000;
    --nt-seq-text-6: #000000;
    --nt-seq-text-7: #000000;
    --nt-shadow-card: none;
    --nt-shadow-card-hover: 0 0 0 1px #3a3a3a;
    --nt-shadow-pop: 0 12px 32px -8px rgb(0 0 0 / 0.6), 0 0 0 1px #333333;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --nt-page: #000000;
  --nt-card: #161616;
  --nt-soft: #1F1F1F;
  --nt-side: #0A0A0A;
  --nt-inverse: #000000;
  --nt-on-inverse: #FFFFFF;
  --nt-ink: #FFFFFF;
  --nt-ink-2: #C7C7C7;
  --nt-muted: #9E9E9E;
  --nt-line: #2A2A2A;
  --nt-line-strong: #6E6E6E;
  --nt-card-border: #2A2A2A;
  --nt-accent: #FF4D9A;
  --nt-on-accent: #000000;
  --nt-accent-tint: #371E28;
  --nt-up: #3CC48A;
  --nt-down: #FF8A4C;
  --nt-prev: #7A7A7A;
  --nt-warn-bg: #F4DC7A;
  --nt-warn-ink: #000000;
  --nt-focus: #FF4D9A;
  --nt-skeleton: #262626;
  --nt-data-notino: #FF4D9A;
  --nt-data-sky: #8091E8;
  --nt-data-chameleon: #98B14D;
  --nt-data-violine: #C59BF3;
  --nt-data-nude: #CD8731;
  --nt-data-other: #8A8A8A;
  --nt-seq-1: #222535;
  --nt-seq-2: #2E3557;
  --nt-seq-3: #3E487E;
  --nt-seq-4: #5462AD;
  --nt-seq-5: #6E7ED4;
  --nt-seq-6: #92A2ED;
  --nt-seq-7: #BCC8F9;
  --nt-seq-text-1: #FFFFFF;
  --nt-seq-text-2: #FFFFFF;
  --nt-seq-text-3: #FFFFFF;
  --nt-seq-text-4: #FFFFFF;
  --nt-seq-text-5: #000000;
  --nt-seq-text-6: #000000;
  --nt-seq-text-7: #000000;
  --nt-shadow-card: none;
  --nt-shadow-card-hover: 0 0 0 1px #3a3a3a;
  --nt-shadow-pop: 0 12px 32px -8px rgb(0 0 0 / 0.6), 0 0 0 1px #333333;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --nt-dur-fast: 0ms; --nt-dur-base: 0ms; --nt-dur-slow: 0ms; }
}