/* ============================================================
   EroideMusic — design tokens (1:1 da UI/Theme/Theme.swift)
   Palette scura con accento viola/magenta, identica ad Android/iOS.
   ============================================================ */

/* --- Font Manrope (5 pesi) + Material Icons Round/Outlined --- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Material Icons Round";
  src: url("../fonts/MaterialIconsRound-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Material Icons Outlined";
  src: url("../fonts/MaterialIconsOutlined-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: block;
}

:root {
  /* Sfondi */
  --background: #09080F;
  --surface: #121019;
  --surface-high: #1A1723;
  --surface-highest: #24202F;

  /* Accenti */
  --violet: #A855F7;        /* accento principale */
  --violet-deep: #7C3AED;
  --fuchsia: #D946EF;
  --magenta: #EC4899;

  /* Testo */
  --text-primary: #F7F5FC;
  --text-secondary: #A7A1B8;
  --text-tertiary: #6E6880;
  --outline: #2E2A3A;

  /* Stati */
  --success: #34D399;
  --error: #FB7185;
  --remove-red: #9F1239;
  --offline-green: #059669;

  /* Gradienti brand */
  --brand: linear-gradient(135deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%);
  --brand-horizontal: linear-gradient(90deg, #7C3AED 0%, #D946EF 50%, #EC4899 100%);
  --downloads-gradient: linear-gradient(135deg, #10B981 0%, #064E3B 100%);

  /* 10 coppie "tiles" per mood / generi / placeholder (gradiente diagonale) */
  --tile-0: linear-gradient(135deg, #7C3AED, #4C1D95);
  --tile-1: linear-gradient(135deg, #DB2777, #831843);
  --tile-2: linear-gradient(135deg, #0EA5E9, #1E3A8A);
  --tile-3: linear-gradient(135deg, #F97316, #9A3412);
  --tile-4: linear-gradient(135deg, #10B981, #064E3B);
  --tile-5: linear-gradient(135deg, #E11D48, #4C0519);
  --tile-6: linear-gradient(135deg, #8B5CF6, #1E1B4B);
  --tile-7: linear-gradient(135deg, #EAB308, #713F12);
  --tile-8: linear-gradient(135deg, #06B6D4, #164E63);
  --tile-9: linear-gradient(135deg, #D946EF, #581C87);

  /* Scala tipografica Material 3 (Manrope) — size / peso / line-height / tracking */
  --t-display-large:   800 52px/58px "Manrope", sans-serif;
  --t-display-medium:  800 42px/48px "Manrope", sans-serif;
  --t-display-small:   800 34px/40px "Manrope", sans-serif;
  --t-headline-large:  800 30px/36px "Manrope", sans-serif;
  --t-headline-medium: 800 26px/32px "Manrope", sans-serif;
  --t-headline-small:  700 22px/28px "Manrope", sans-serif;
  --t-title-large:     700 20px/26px "Manrope", sans-serif;
  --t-title-medium:    700 16px/22px "Manrope", sans-serif;
  --t-title-small:     700 14px/20px "Manrope", sans-serif;
  --t-body-large:      500 16px/24px "Manrope", sans-serif;
  --t-body-medium:     500 14px/20px "Manrope", sans-serif;
  --t-body-small:      500 12px/16px "Manrope", sans-serif;
  --t-label-large:     700 14px/20px "Manrope", sans-serif;
  --t-label-medium:    700 12px/16px "Manrope", sans-serif;
  --t-label-small:     700 11px/14px "Manrope", sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Classi tipografiche riutilizzabili (font + tracking esatti dal Theme.swift) */
.t-display-large   { font: var(--t-display-large);   letter-spacing: -1.5px; }
.t-display-medium  { font: var(--t-display-medium);  letter-spacing: -1.0px; }
.t-display-small   { font: var(--t-display-small);   letter-spacing: -0.8px; }
.t-headline-large  { font: var(--t-headline-large);  letter-spacing: -0.6px; }
.t-headline-medium { font: var(--t-headline-medium); letter-spacing: -0.5px; }
.t-headline-small  { font: var(--t-headline-small);  letter-spacing: -0.3px; }
.t-title-large     { font: var(--t-title-large);     letter-spacing: -0.2px; }
.t-title-medium    { font: var(--t-title-medium);    letter-spacing: -0.1px; }
.t-title-small     { font: var(--t-title-small);     letter-spacing: 0; }
.t-body-large      { font: var(--t-body-large);      letter-spacing: 0; }
.t-body-medium     { font: var(--t-body-medium);     letter-spacing: 0; }
.t-body-small      { font: var(--t-body-small);      letter-spacing: 0; }
.t-label-large     { font: var(--t-label-large);     letter-spacing: 0.1px; }
.t-label-medium    { font: var(--t-label-medium);    letter-spacing: 0.2px; }
.t-label-small     { font: var(--t-label-small);     letter-spacing: 0.6px; }