/* Nextory design tokens — generated from the design system, not typed by hand.
 *
 * Source: CORE Omni Colors (Figma YbjBC3oG0yJ6tgg4hoXjRE, node 2:146) and
 *         CORE Omni Text (rv6lfgbnN4Ivqf5ojtzH5H), both last reviewed April 2026.
 * Owner: skill-design. Import this file; never copy a value out of it.
 *
 * Two layers, and the difference is the whole point:
 *   primitives  the raw palette. Never used in a component.
 *   semantic    what you use. They change with the theme; primitives do not.
 *
 * Light is the default. Dark and Kids are [data-theme] on a parent element.
 */

:root {
  /* ---- Primitives. The palette's one home. Never referenced by a component. ---- */
  --pink100: #FFF4F8;
  --pink200: #FFE0EC;
  --pink300: #FF98AF;
  --pink400: #FC5978;
  --pink500: #D7355B;
  --pink600: #A44B6B;
  --pink700: #730014;
  --pink800: #420002;
  --pink900: #270002;
  --purple100: #FFF7FF;
  --purple200: #FFEAFF;
  --purple300: #F4CDFF;
  --purple400: #C18FE4;
  --purple500: #9364B6;
  --purple600: #673B88;
  --purple700: #421862;
  --purple800: #290C41;
  --purple900: #100020;

  /* ---- Sampled from the Nextory x Decathlon sticker artwork. Close to
     --purple700 above, but not equal to it. ---- */
  --stickerInk: #4A1A6E;
  --green100: #F6FFEB;
  --green200: #E5FFC7;
  --green300: #D0FF94;
  --green400: #A9F36A;
  --green500: #7DC734;
  --green600: #499500;
  --green700: #0D6600;
  --green800: #003900;
  --green900: #002200;
  --yellow100: #FEF8E4;
  --yellow200: #FEF1CB;
  --yellow300: #FEE8A7;
  --yellow400: #FEDD7E;
  --yellow500: #FECD40;
  --yellow600: #EAAD0D;
  --yellow700: #A37703;
  --yellow800: #4E3900;
  --yellow900: #2C2000;
  --gray100: #FFF8F9;
  --gray200: #F0E7E8;
  --gray300: #E2D7D8;
  --gray400: #C7BCBD;
  --gray500: #A19798;
  --gray600: #776E6E;
  --gray700: #3D3435;
  --gray800: #2D2526;
  --gray900: #1A1110;
  --sand100: #F9F5F2;
  --sand200: #EEEBE8;
  --sand300: #DEDAD7;
  --sand400: #C4C0BD;
  --sand500: #9F9898;
  --sand600: #6E6868;
  --sand700: #4C4846;
  --sand800: #32302D;
  --sand900: #1F1C1A;
  --black: #000000;
  --white: #FFFFFF;
  --sepia: #CECAC0;

  /* ---- Semantic · Light. What a component actually uses. ---- */
  /* Content */
  --contentPrimary: var(--sand800);  /* Text and icons (main) */
  --contentSecondary: var(--sand600);  /* Rarely used; not used in Kids mode */
  --contentTertiary: var(--sand400);  /* Inactive content */
  --contentAccent: var(--pink500);  /* Highlight elements, navigation, active states */
  --contentError: var(--pink600);  /* Extra dark accent for error messages (better readability) */
  --contentPrimaryAlwaysLight: var(--sand200);  /* Player elements — always light regardless of theme */
  --contentPrimaryAlwaysDark: var(--sand800);  /* Tooltip text — always dark regardless of theme */
  --contentYellow: var(--yellow600);  /* Rating star color */
  --contentOverImageDark: var(--sand900);  /* Text on images (needs extra contrast) — dark */
  --contentOverImageLight: var(--gray100);  /* Text on images (needs extra contrast) — light */
  --contentOverBackgroundPurpleLight: var(--purple700);  /* Content on purple light background (brand flavour) */
  --contentOverBackgroundPurpleDark: var(--purple300);  /* Content on purple dark background (brand flavour) */
  --contentOverBackgroundGreen: var(--green700);  /* Content on green background (brand flavour) */
  --contentOverBackgroundPink: var(--pink800);  /* Content on pink background (brand flavour) */
  --contentOverBackgroundYellow: var(--yellow800);  /* Content on yellow background (brand flavour) */
  --contentOverBackgroundDark: var(--sand300);  /* Content on dark background (brand flavour) */
  --contentSkeleton: var(--sand300);  /* Skeleton loader */
  --contentLibrarianAvatarIcon: var(--green400);  /* Librarian avatar — green icon */
  --contentLibrarianAvatarCircle: var(--purple600);  /* Librarian avatar — purple background */

  /* Background */
  --background: var(--sand200);  /* Standard page background (level 1) */
  --backgroundSecondary: var(--sand100);  /* Cards, sheets, lighter surface (level 2) */
  --backgroundTertiary: var(--white);  /* Tooltips, modals, inputs (level 3) */
  --backgroundPurpleDark: var(--purple700);  /* Brand flavour — dark purple */
  --backgroundPurpleLight: var(--purple300);  /* Brand flavour — light purple */
  --backgroundGreen: var(--green400);  /* Brand flavour — green */
  --backgroundPink: var(--pink400);  /* Brand flavour — pink */
  --backgroundYellow: var(--yellow400);  /* Brand flavour — yellow (badges) */
  --backgroundLight: var(--sand100);  /* Brand flavour — always light */
  --backgroundDark: var(--sand800);  /* Brand flavour — always dark */
  --backgroundOverlay: rgba(0, 0, 0, 0.4);  /* Modal dimming overlay */

  /* Buttons */
  --buttonCTAText: var(--white);  /* Text on CTA button */
  --buttonCTABackground: var(--pink500);  /* Background of CTA button */
  --buttonPrimaryText: var(--sand200);  /* Text on Primary button */
  --buttonPrimaryBackground: var(--sand800);  /* Background of Primary button */
  --buttonSecondaryText: var(--sand800);  /* Text on Secondary button */
  --buttonSecondaryBackground: var(--sand300);  /* Secondary button background */
  --buttonTertiaryText: var(--sand800);  /* Text on Tertiary button */
  --switchSecondaryBackground: var(--sand300);  /* Switch secondary background */

  /* Selection Controls */
  --switchActiveHandle: var(--sand200);  /* Toggle handle (active) */
  --switchActiveBackground: var(--sand800);  /* Toggle track (active) */
  --switchInactiveHandle: var(--sand200);  /* Toggle handle (inactive) */
  --switchInactiveBackground: var(--sand300);  /* Toggle track (inactive) */
  --checkboxActiveIcon: var(--sand200);  /* Checkbox icon (active/checked) */
  --checkboxActiveBackground: var(--sand800);  /* Checkbox background (active) */
  --checkboxInactiveBackground: var(--sand100);  /* Checkbox background (inactive) */
  --chipsActiveLabel: var(--sand200);  /* Filter chip label (active) */
  --chipsActiveBackground: var(--sand800);  /* Filter chip background (active) */
  --chipsInactiveBackground: var(--sand300);  /* Filter chip background (inactive) */
  --chipsDockedBackground: var(--sand600);  /* Filter chip docked to level 1 background */

  /* Lines */
  --lineDivider: var(--sand300);  /* Divider lines between content */
  --lineBorder: var(--sand400);  /* Text field borders */
  --switchBorder: var(--sand400);  /* Android switch border */
  --lineBorderError: var(--pink600);  /* Text field error state border */

  /* Other */
  --alwaysLight: var(--white);  /* Inputs, tooltips — always light surface */

  /* Token Reader */
  --readerLightBackground: var(--sand100);  /* Reader — light mode background */
  --readerLightText: var(--sand900);  /* Reader — light mode text */
  --readerSepiaBackground: var(--sepia);  /* Reader — sepia mode background */
  --readerSepiaText: var(--sand900);  /* Reader — sepia mode text */
  --readerDarkBackground: var(--black);  /* Reader — dark mode background */
  --readerDarkText: var(--sand200);  /* Reader — dark mode text */

  /* ---- Typeface. NextorySans only; there is no second face and no 700 weight. ---- */
  --font-family: "NextorySans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-headline: 600;   /* Headline DemiBold — the heaviest weight that exists */

  /* CORE text styles — shared by app and web. Size / line height / tracking. */
  --text-body1-size: 16px;
  --text-body1-line: 24px;
  --text-body1-tracking: 0.1px;
  --text-body1-weight: var(--weight-regular);
  --text-body1-italic-size: 16px;
  --text-body1-italic-line: 24px;
  --text-body1-italic-tracking: 0.1px;
  --text-body1-italic-weight: var(--weight-regular);
  --text-body2-size: 14px;
  --text-body2-line: 20px;
  --text-body2-tracking: 0.1px;
  --text-body2-weight: var(--weight-regular);
  --text-body2-italic-size: 14px;
  --text-body2-italic-line: 20px;
  --text-body2-italic-tracking: -0.1px;
  --text-body2-italic-weight: var(--weight-regular);
  --text-meta1-size: 13px;
  --text-meta1-line: 16px;
  --text-meta1-tracking: 0.1px;
  --text-meta1-weight: var(--weight-medium);
  --text-meta2-size: 11px;
  --text-meta2-line: 16px;
  --text-meta2-tracking: 0.1px;
  --text-meta2-weight: var(--weight-medium);
  --text-button1-size: 16px;
  --text-button1-line: 24px;
  --text-button1-tracking: 0.1px;
  --text-button1-weight: var(--weight-medium);
  --text-button2-size: 14px;
  --text-button2-line: 16px;
  --text-button2-tracking: 0.1px;
  --text-button2-weight: var(--weight-medium);
  --text-headline3-size: 24px;
  --text-headline3-line: 28px;
  --text-headline3-tracking: 0.1px;
  --text-headline3-weight: var(--weight-headline);
  --text-headline4-size: 20px;
  --text-headline4-line: 24px;
  --text-headline4-tracking: 0.1px;
  --text-headline4-weight: var(--weight-headline);
  --text-headline5-size: 17px;
  --text-headline5-line: 20px;
  --text-headline5-tracking: 0.1px;
  --text-headline5-weight: var(--weight-headline);
  --text-headline6-size: 14px;
  --text-headline6-line: 16px;
  --text-headline6-tracking: 0.1px;
  --text-headline6-weight: var(--weight-headline);

  /* WEB minor headlines — fixed size. Web tracking is -0.1, not CORE's +0.1. */
  --text-subtitle-medium-4-size: 24px;
  --text-subtitle-medium-4-line: 28px;
  --text-subtitle-medium-4-tracking: -0.1px;
  --text-subtitle-medium-4-weight: var(--weight-headline);
  --text-headline-small-5-size: 20px;
  --text-headline-small-5-line: 24px;
  --text-headline-small-5-tracking: -0.1px;
  --text-headline-small-5-weight: var(--weight-headline);
  --text-subtitle-small-6-size: 18px;
  --text-subtitle-small-6-line: 20px;
  --text-subtitle-small-6-tracking: -0.1px;
  --text-subtitle-small-6-weight: var(--weight-headline);
  --text-headline-body-7-size: 16px;
  --text-headline-body-7-line: 20px;
  --text-headline-body-7-tracking: -0.1px;
  --text-headline-body-7-weight: var(--weight-headline);

  /* WEB responsive headings. These are the XS values; the media queries below
     raise them. Tracking is -0.1 across the whole range. */
  --text-heading-big-1-size: 40px;
  --text-heading-big-1-line: 48px;
  --text-heading-big-1-tracking: -0.1px;
  --text-heading-big-1-weight: var(--weight-headline);
  --text-subtitle-big-2-size: 30px;
  --text-subtitle-big-2-line: 36px;
  --text-subtitle-big-2-tracking: -0.1px;
  --text-subtitle-big-2-weight: var(--weight-headline);
  --text-headline-medium-3-size: 28px;
  --text-headline-medium-3-line: 36px;
  --text-headline-medium-3-tracking: -0.1px;
  --text-headline-medium-3-weight: var(--weight-headline);

  /* Preamble body — responsive, and Medium rather than Regular at XXL. */
  --text-preamble-size: 16px;
  --text-preamble-line: 24px;
  --text-preamble-tracking: 0.1px;
  --text-preamble-weight: var(--weight-regular);
}

[data-theme="dark"] {
  /* Semantic · Dark. Primitives never change; these do. */
  --contentPrimary: var(--gray500);
  --contentSecondary: var(--gray500);
  --contentTertiary: var(--gray600);
  --contentError: var(--pink400);
  --contentPrimaryAlwaysLight: var(--gray300);
  --contentPrimaryAlwaysDark: var(--gray800);
  --contentOverImageDark: var(--gray900);
  --contentSkeleton: var(--gray600);
  --background: var(--gray900);
  --backgroundSecondary: var(--gray800);
  --backgroundTertiary: var(--gray700);
  --backgroundOverlay: rgba(0, 0, 0, 0.85);
  --buttonPrimaryText: var(--gray800);
  --buttonPrimaryBackground: var(--gray300);
  --buttonSecondaryText: var(--gray300);
  --buttonSecondaryBackground: var(--gray700);
  --buttonTertiaryText: var(--gray300);
  --switchSecondaryBackground: var(--gray700);
  --switchActiveHandle: var(--gray800);
  --switchActiveBackground: var(--gray200);
  --switchInactiveHandle: var(--gray900);
  --switchInactiveBackground: var(--gray700);
  --checkboxActiveIcon: var(--gray800);
  --checkboxActiveBackground: var(--gray200);
  --checkboxInactiveBackground: var(--gray800);
  --chipsActiveLabel: var(--gray800);
  --chipsActiveBackground: var(--gray300);
  --chipsInactiveBackground: var(--gray700);
  --chipsDockedBackground: var(--gray600);
  --lineDivider: var(--gray700);
  --lineBorder: var(--gray600);
  --switchBorder: var(--gray600);
  --lineBorderError: var(--pink400);
  --alwaysLight: var(--gray300);
}

[data-theme="kids"] {
  /* Semantic · Kids. Primitives never change; these do. */
  --contentPrimary: var(--gray300);
  --contentSecondary: var(--gray300);
  --contentTertiary: var(--purple800);
  --contentError: var(--pink400);
  --contentPrimaryAlwaysLight: var(--gray300);
  --contentPrimaryAlwaysDark: var(--gray800);
  --contentOverImageDark: var(--gray900);
  --contentSkeleton: var(--purple700);
  --background: var(--purple900);
  --backgroundSecondary: var(--purple800);
  --backgroundTertiary: var(--purple700);
  --backgroundOverlay: rgba(0, 0, 0, 0.85);
  --buttonPrimaryText: var(--purple800);
  --buttonPrimaryBackground: var(--purple300);
  --buttonSecondaryText: var(--gray300);
  --buttonSecondaryBackground: var(--purple700);
  --buttonTertiaryText: var(--gray300);
  --switchSecondaryBackground: var(--gray700);
  --switchActiveHandle: var(--purple800);
  --switchActiveBackground: var(--purple200);
  --switchInactiveHandle: var(--purple900);
  --switchInactiveBackground: var(--purple700);
  --checkboxActiveIcon: var(--purple800);
  --checkboxActiveBackground: var(--purple200);
  --checkboxInactiveBackground: var(--purple800);
  --chipsActiveLabel: var(--purple800);
  --chipsActiveBackground: var(--purple300);
  --chipsInactiveBackground: var(--purple700);
  --chipsDockedBackground: var(--purple600);
  --lineDivider: var(--purple700);
  --lineBorder: var(--purple600);
  --switchBorder: var(--gray600);
  --lineBorderError: var(--pink400);
  --alwaysLight: var(--gray300);
}

/* The responsive web headings. Each breakpoint only restates what changed. */
@media (min-width: 576px) {
  :root {
    --text-heading-big-1-size: 40px;
    --text-heading-big-1-line: 48px;
    --text-subtitle-big-2-size: 30px;
    --text-subtitle-big-2-line: 36px;
    --text-headline-medium-3-size: 28px;
    --text-headline-medium-3-line: 36px;
  }
}

@media (min-width: 768px) {
  :root {
    --text-heading-big-1-size: 50px;
    --text-heading-big-1-line: 60px;
    --text-subtitle-big-2-size: 32px;
    --text-subtitle-big-2-line: 40px;
    --text-headline-medium-3-size: 30px;
    --text-headline-medium-3-line: 40px;
  }
}

@media (min-width: 992px) {
  :root {
    --text-heading-big-1-size: 50px;
    --text-heading-big-1-line: 60px;
    --text-subtitle-big-2-size: 32px;
    --text-subtitle-big-2-line: 40px;
    --text-headline-medium-3-size: 30px;
    --text-headline-medium-3-line: 40px;
  }
}

@media (min-width: 1200px) {
  :root {
    --text-heading-big-1-size: 60px;
    --text-heading-big-1-line: 68px;
    --text-subtitle-big-2-size: 40px;
    --text-subtitle-big-2-line: 48px;
    --text-headline-medium-3-size: 34px;
    --text-headline-medium-3-line: 44px;
  }
}

@media (min-width: 1400px) {
  :root {
    --text-preamble-size: 18px;
    --text-preamble-line: 26px;
    --text-preamble-weight: var(--weight-medium);
  }
}

/* Layout — the 4pt baseline grid and the content container, from
   reference/components/web/WEB Omni Grid.md. Every height, padding and margin
   on the web is a multiple of 4px; these are the multiples that document names. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --content-width: 1140px;
  --content-width-md: 720px;
}