/* =============================================================
   Smule Colors V2 — generated from
     uploads/Smule Colors - V2/Light.tokens.json
     uploads/Smule Colors - V2/Dark.tokens.json
   Do not edit by hand. Re-run gen-tokens.js to regenerate.

   Two layers:
     1. Raw scales (Grey, Purple Grey, Purple, Magenta, Green, Red,
        Yellow + Black/White at fixed alphas).
     2. Semantic aliases (Background.*, Text.*, Overlay.*, Primary.*,
        Accent.*, Error.*, Success.*, Other.*, Sing.*, SF.*).

   Light is the default. Switch a subtree to dark by setting
   [data-theme="dark"] on any ancestor element.

   Source discrepancy resolved:
     --raw-green-600 is #0F935C in both Light and Dark (the Dark JSON had #0C7248 — corrected).
     Confirmed correct value: #0F935C.
   ============================================================= */

:root,
:root[data-theme="light"] {
  --raw-transparent: rgba(255, 255, 255, 0);
  --raw-grey-100: #FBFBFB;
  --raw-grey-200-80: rgba(235, 238, 238, 0.800000011920929);
  --raw-grey-200-50: rgba(235, 238, 238, 0.5);
  --raw-grey-300: #DBE0E1;
  --raw-grey-400: #98979C;
  --raw-grey-500: #747478;
  --raw-grey-600-56: rgba(88, 90, 100, 0.5600000023841858);
  --raw-grey-600-50: rgba(88, 90, 100, 0.5);
  --raw-grey-600-10: rgba(88, 90, 100, 0.10000000149011612);
  --raw-grey-700: #38393A;
  --raw-grey-800: #1F2121;
  --raw-purple-grey-50: #F2F2F3;
  --raw-purple-grey-100: #D8D8DA;
  --raw-purple-grey-200: #BDBDC1;
  --raw-purple-grey-300: #A3A3A9;
  --raw-purple-grey-400: #898990;
  --raw-purple-grey-500: #6F6F76;
  --raw-purple-grey-600: #56565C;
  --raw-purple-grey-700-80: rgba(62, 62, 66, 0.800000011920929);
  --raw-purple-grey-800: #252527;
  --raw-purple-grey-900: #0F0F10;
  --raw-purple-50: #F3E9FF;
  --raw-purple-100: #DABCFE;
  --raw-purple-200: #C89BFD;
  --raw-purple-300: #AF6EFC;
  --raw-purple-400: #A051FC;
  --raw-purple-500-10: rgba(136, 38, 251, 0.10000000149011612);
  --raw-purple-500-30: rgba(136, 38, 251, 0.30000001192092896);
  --raw-purple-600: #7C23E4;
  --raw-purple-700: #611BB2;
  --raw-purple-800: #4B158A;
  --raw-purple-900: #391069;
  --raw-magenta-50: #FFEAF1;
  --raw-magenta-100: #FEBCD2;
  --raw-magenta-200: #FE9CBC;
  --raw-magenta-300: #FE6F9E;
  --raw-magenta-400: #FD538B;
  --raw-magenta-500: #FD286E;
  --raw-magenta-600: #E62464;
  --raw-magenta-700: #B41C4E;
  --raw-magenta-800: #8B163D;
  --raw-magenta-900: #6A112E;
  --raw-green-50: #E7F6F0;
  --raw-green-100: #B5E2CF;
  --raw-green-200: #92D4B8;
  --raw-green-300: #60C098;
  --raw-green-400: #41B484;
  --raw-green-500: #11A165;
  --raw-green-600: #0F935C;
  --raw-green-700: #0C7248;
  --raw-green-800: #095938;
  --raw-green-900: #07442A;
  --raw-red-50: #FFECEC;
  --raw-red-100: #FEC4C3;
  --raw-red-200: #FEA8A6;
  --raw-red-300: #FD807E;
  --raw-red-400: #FD6765;
  --raw-red-500: #FC413E;
  --raw-red-600: #E53B38;
  --raw-red-700: #B32E2C;
  --raw-red-800: #8B2422;
  --raw-red-900: #6A1B1A;
  --raw-yellow-50: #FFF8E6;
  --raw-yellow-100: #FEE9B0;
  --raw-yellow-200: #FEDF8A;
  --raw-yellow-300: #FED054;
  --raw-yellow-400: #FDC733;
  --raw-yellow-500: #FDB900;
  --raw-yellow-600: #E6A800;
  --raw-yellow-700: #B48300;
  --raw-yellow-800: #8B6600;
  --raw-yellow-900: #6A4E00;
  --raw-black-black: #000000;
  --raw-black-10: rgba(0, 0, 0, 0.10000000149011612);
  --raw-black-15: rgba(0, 0, 0, 0.15000000596046448);
  --raw-black-20: rgba(0, 0, 0, 0.20000000298023224);
  --raw-black-30: rgba(0, 0, 0, 0.30000001192092896);
  --raw-black-40: rgba(0, 0, 0, 0.4000000059604645);
  --raw-black-50: rgba(0, 0, 0, 0.5);
  --raw-black-60: rgba(0, 0, 0, 0.6000000238418579);
  --raw-black-70: rgba(0, 0, 0, 0.699999988079071);
  --raw-black-80: rgba(0, 0, 0, 0.800000011920929);
  --raw-black-90: rgba(0, 0, 0, 0.8999999761581421);
  --raw-white-white: #FFFFFF;
  --raw-white-10: rgba(255, 255, 255, 0.10000000149011612);
  --raw-white-15: rgba(255, 255, 255, 0.15000000596046448);
  --raw-white-20: rgba(255, 255, 255, 0.20000000298023224);
  --raw-white-30: rgba(255, 255, 255, 0.30000001192092896);
  --raw-white-40: rgba(255, 255, 255, 0.4000000059604645);
  --raw-white-50: rgba(255, 255, 255, 0.5);
  --raw-white-60: rgba(255, 255, 255, 0.6000000238418579);
  --raw-white-70: rgba(255, 255, 255, 0.699999988079071);
  --raw-white-80: rgba(255, 255, 255, 0.800000011920929);
  --raw-white-90: rgba(255, 255, 255, 0.8999999761581421);

  /* ---- Semantic (Light) ---- */
  --background-primary: #FFFFFF; /* → {Raw.White.White} */
  --background-secondary: #EBEEEE; /* → {Raw.Grey.200.$root} */
  --background-tertiary: #DBE0E1; /* → {Raw.Grey.300} */
  --background-contrast: #1F2121; /* → {Raw.Grey.800} */
  --background-ghost: rgba(255, 255, 255, 0); /* → {Raw.Transparent} */
  --background-layered: rgba(0, 0, 0, 0.10000000149011612); /* → {Raw.Black.10%} */
  --background-dynamic: rgba(88, 90, 100, 0.10000000149011612); /* → {Raw.Grey.600.10%} */
  --text-primary: #1F2121; /* → {Raw.Grey.800} */
  --text-secondary: #585A64; /* → {Raw.Grey.600.$root} */
  --text-tertiary: #747478; /* → {Raw.Grey.500} */
  --text-disabled: #98979C; /* → {Raw.Grey.400} */
  --text-contrast: #FFFFFF; /* → {Raw.White.White} */
  --text-success: #0F935C; /* → {Success.Main} */
  --text-error: #B32E2C; /* → {Error.Main} */
  --overlay-primary: rgba(0, 0, 0, 0.4000000059604645); /* → {Raw.Black.40%} */
  --overlay-secondary: rgba(235, 238, 238, 0.800000011920929); /* → {Raw.Grey.200.80%} */
  --overlay-contrast: #FFFFFF; /* → {Raw.White.White} */
  --primary-main: #8826FB; /* → {Raw.Purple.500.$root} */
  --primary-bright: #AF6EFC; /* → {Raw.Purple.300} */
  --primary-brighter: #DABCFE; /* → {Raw.Purple.100} */
  --primary-brightest: #F3E9FF; /* → {Raw.Purple.50} */
  --primary-dim: #4B158A; /* → {Raw.Purple.800} */
  --primary-contrast: #FFFFFF; /* → {Raw.White.White} */
  --primary-dynamic: rgba(136, 38, 251, 0.10000000149011612); /* → {Raw.Purple.500.10%} */
  --primary-foreground-high: #8826FB; /* → {Raw.Purple.500.$root} */
  --primary-foreground: #8826FB; /* → {Raw.Purple.500.$root} */
  --accent-main: #FD286E; /* → {Raw.Magenta.500} */
  --accent-bright: #FE6F9E; /* → {Raw.Magenta.300} */
  --accent-dim: #8B163D; /* → {Raw.Magenta.800} */
  --accent-contrast: #FFFFFF; /* → {Raw.White.White} */
  --error-main: #B32E2C; /* → {Raw.Red.700} */
  --error-bright: #FD6765; /* → {Raw.Red.400} */
  --error-brightest: #FFECEC; /* → {Raw.Red.50} */
  --error-dim: #6A1B1A; /* → {Raw.Red.900} */
  --error-contrast: #FFFFFF; /* → {Raw.White.White} */
  --success-main: #0F935C; /* → {Raw.Green.600} */
  --success-bright: #41B484; /* → {Raw.Green.400} */
  --success-brightest: #E7F6F0; /* → {Raw.Green.50} */
  --success-dim: #07442A; /* → {Raw.Green.900} */
  --success-contrast: #FFFFFF; /* → {Raw.White.White} */
  --other-coins: #FDB900; /* → {Raw.Yellow.500} */
  --other-separator: rgba(0, 0, 0, 0.20000000298023224); /* → {Raw.Black.20%} */
  --sing-solo: #0DD3FF;
  --sing-duet: #FFF700;
  --sf-background-primary: #0F0F10; /* → {Raw.Purple Grey.900} */
  --sf-background-secondary: #252527; /* → {Raw.Purple Grey.800} */
  --sf-background-tertiary: #3E3E42; /* → {Raw.Purple Grey.700.$root} */
  --sf-background-contrast: #FFFFFF; /* → {Raw.White.White} */
  --sf-background-layered: rgba(0, 0, 0, 0.10000000149011612); /* → {Raw.Black.10%} */
  --sf-text-primary: #F2F2F3; /* → {Raw.Purple Grey.50} */
  --sf-text-secondary: #BDBDC1; /* → {Raw.Purple Grey.200} */
  --sf-text-tertiary: #A3A3A9; /* → {Raw.Purple Grey.300} */
  --sf-text-disabled: #6F6F76; /* → {Raw.Purple Grey.500} */
  --sf-text-contrast: #0F0F10;
  --sf-overlay-primary: rgba(0, 0, 0, 0.8999999761581421); /* → {Raw.Black.90%} */
  --sf-overlay-secondary: rgba(62, 62, 66, 0.800000011920929); /* → {Raw.Purple Grey.700.80%} */
  --sf-overlay-contrast: #000000; /* → {Raw.Black.Black} */
}

[data-theme="dark"] {
  /* Raw overrides for dark (only tokens whose value changes) */
  /* --raw-green-600 intentionally omitted — same as Light: #0F935C */

  /* ---- Semantic (Dark) ---- */
  --background-primary: #0F0F10; /* → {Raw.Purple Grey.900} */
  --background-secondary: #252527; /* → {Raw.Purple Grey.800} */
  --background-tertiary: #3E3E42; /* → {Raw.Purple Grey.700.$root} */
  --background-contrast: #F2F2F3; /* → {Raw.Purple Grey.50} */
  --background-ghost: rgba(255, 255, 255, 0); /* → {Raw.Transparent} */
  --background-layered: rgba(255, 255, 255, 0.15000000596046448); /* → {Raw.White.15%} */
  --background-dynamic: rgba(88, 90, 100, 0.5600000023841858); /* → {Raw.Grey.600.56%} */
  --text-primary: #F2F2F3; /* → {Raw.Purple Grey.50} */
  --text-secondary: #BDBDC1; /* → {Raw.Purple Grey.200} */
  --text-tertiary: #A3A3A9; /* → {Raw.Purple Grey.300} */
  --text-disabled: #6F6F76; /* → {Raw.Purple Grey.500} */
  --text-contrast: #0F0F10; /* → {Raw.Purple Grey.900} */
  --text-success: #41B484; /* → {Success.Bright} */
  --text-error: #FD6765; /* → {Error.Bright} */
  --overlay-primary: rgba(0, 0, 0, 0.8999999761581421); /* → {Raw.Black.90%} */
  --overlay-secondary: rgba(62, 62, 66, 0.800000011920929); /* → {Raw.Purple Grey.700.80%} */
  --overlay-contrast: #000000; /* → {Raw.Black.Black} */
  --primary-main: #8826FB; /* → {Raw.Purple.500.$root} */
  --primary-bright: #AF6EFC; /* → {Raw.Purple.300} */
  --primary-brighter: #DABCFE; /* → {Raw.Purple.100} */
  --primary-brightest: #F3E9FF; /* → {Raw.Purple.50} */
  --primary-dim: #4B158A; /* → {Raw.Purple.800} */
  --primary-contrast: #FFFFFF; /* → {Raw.White.White} */
  --primary-dynamic: rgba(136, 38, 251, 0.30000001192092896); /* → {Raw.Purple.500.30%} */
  --primary-foreground-high: #DABCFE; /* → {Raw.Purple.100} */
  --primary-foreground: #AF6EFC; /* → {Raw.Purple.300} */
  --accent-main: #FD286E; /* → {Raw.Magenta.500} */
  --accent-bright: #FE6F9E; /* → {Raw.Magenta.300} */
  --accent-dim: #8B163D; /* → {Raw.Magenta.800} */
  --accent-contrast: #FFFFFF; /* → {Raw.White.White} */
  --error-main: #B32E2C; /* → {Raw.Red.700} */
  --error-bright: #FD6765; /* → {Raw.Red.400} */
  --error-brightest: #FFECEC; /* → {Raw.Red.50} */
  --error-dim: #6A1B1A; /* → {Raw.Red.900} */
  --error-contrast: #FFFFFF; /* → {Raw.White.White} */
  --success-main: #0F935C; /* → {Raw.Green.600} */
  --success-bright: #41B484; /* → {Raw.Green.400} */
  --success-brightest: #E7F6F0; /* → {Raw.Green.50} */
  --success-dim: #07442A; /* → {Raw.Green.900} */
  --success-contrast: #FFFFFF; /* → {Raw.White.White} */
  --other-coins: #FDB900; /* → {Raw.Yellow.500} */
  --other-separator: rgba(255, 255, 255, 0.20000000298023224); /* → {Raw.White.20%} */
  --sing-solo: #0DD3FF;
  --sing-duet: #FFF700;
  --sf-background-primary: #0F0F10; /* → {Raw.Purple Grey.900} */
  --sf-background-secondary: #252527; /* → {Raw.Purple Grey.800} */
  --sf-background-tertiary: #3E3E42; /* → {Raw.Purple Grey.700.$root} */
  --sf-background-contrast: #FFFFFF; /* → {Raw.White.White} */
  --sf-background-layered: rgba(255, 255, 255, 0.15000000596046448); /* → {Raw.White.15%} */
  --sf-text-primary: #F2F2F3; /* → {Raw.Purple Grey.50} */
  --sf-text-secondary: #BDBDC1; /* → {Raw.Purple Grey.200} */
  --sf-text-tertiary: #A3A3A9; /* → {Raw.Purple Grey.300} */
  --sf-text-disabled: #6F6F76; /* → {Raw.Purple Grey.500} */
  --sf-text-contrast: #0F0F10;
  --sf-overlay-primary: rgba(0, 0, 0, 0.8999999761581421); /* → {Raw.Black.90%} */
  --sf-overlay-secondary: rgba(62, 62, 66, 0.800000011920929); /* → {Raw.Purple Grey.700.80%} */
  --sf-overlay-contrast: #000000; /* → {Raw.Black.Black} */
}