@font-face{
  font-family:'DM Sans';
  src:url('../fonts/DM-Sans.ttf') format('truetype');
  font-style:normal;
  font-weight:100 1000;
  font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('../fonts/DM-Sans-Italic.ttf') format('truetype');
  font-style:italic;
  font-weight:100 1000;
  font-display:swap;
}
@font-face{
  font-family:'Roca Heavy';
  src:url('../fonts/Roca-Heavy.ttf') format('truetype');
  font-style:normal;
  font-weight:700 900;
  font-display:swap;
}

:root{
  --bg:#0a0a13;
  --bg-soft:#101020;
  --surface:rgba(255,255,255,.045);
  --surface-strong:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.09);
  --text:#f6f4ff;
  --muted:#9a92ba;
  --muted-2:#b0a6de;
  --muted-3:#2a263d;
  --violet:#a06bff;
  --pink:#ff8a42;
  --real-pink:#ff8a42;
  --amber:#ffb35c;
  --maxw:1180px;
  --nav-bg:rgba(10,10,19,.55);
  --glass-blur:16px;
  --glass-saturate:1.15;
  --selection-bg:#ff8a42;
  --selection-text:#0a0a13;
  --hero-text-gradient:linear-gradient(100deg, #fff 10%, var(--pink) 55%, var(--violet) 90%);
  --card-sheen:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  --card-top-glow:linear-gradient(155deg, rgba(255,255,255,.08), transparent 35%);
  --decorative-num:rgba(255,255,255,.08);

  --fos-card-volume-color:#7e42ff;
  --fos-card-title-color:#8000f9;


  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --bg-soft:#eef1f7;
  --surface:rgba(12,18,32,.04);
  --surface-strong:rgba(12,18,32,.08);
  --border:rgba(17,24,39,.12);
  --text:#553b52;
  --text-alt:#ffb8f2;
  --real-pink:#ff62a6;
  --muted:#dee7ff;
  --muted-2:#7a8399;
  --muted-3:#2a263d;
  --nav-bg:rgba(246,247,251,.74);
  --selection-bg:#111827;
  --selection-text:#f6f7fb;
  --hero-text-gradient:linear-gradient(100deg, #ff6294 6%, var(--pink) 54%, var(--violet) 92%);
  --card-sheen:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.45));
  --card-top-glow:linear-gradient(155deg, rgba(160,107,255,.16), transparent 42%);
  --decorative-num:rgba(17,24,39,.06);
  color-scheme:light;


  --fos-card-volume-color:#7125b8;
  --fos-card-title-color:#8400ff;
}

/* Liquid Glass — réglage partagé par toutes les surfaces translucides. */
:root[data-glass="clear"]{
  --surface:rgba(255,255,255,.035);
  --surface-strong:rgba(255,255,255,.065);
  --border:rgba(255,255,255,.11);
  --nav-bg:rgba(10,10,19,.34);
  --glass-blur:24px;
  --glass-saturate:1.3;
}
:root[data-glass="tinted"]{
  --surface:rgba(255,255,255,.075);
  --surface-strong:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.14);
  --nav-bg:rgba(10,10,19,.68);
  --glass-blur:16px;
  --glass-saturate:1.15;
}
:root[data-glass="opaque"]{
  --surface:#20202b;
  --surface-strong:#2a2a38;
  --border:rgba(255,255,255,.16);
  --nav-bg:#0f0f19;
  --glass-blur:0px;
  --glass-saturate:1;
}
:root[data-theme="light"][data-glass="clear"]{
  --surface:rgba(255,255,255,.3);
  --surface-strong:rgba(255,255,255,.48);
  --border:rgba(17,24,39,.13);
  --nav-bg:rgba(246,247,251,.4);
}
:root[data-theme="light"][data-glass="tinted"]{
  --surface:rgba(255,255,255,.62);
  --surface-strong:rgba(255,255,255,.82);
  --border:rgba(17,24,39,.14);
  --nav-bg:rgba(246,247,251,.78);
}
:root[data-theme="light"][data-glass="opaque"]{
  --surface:#fff;
  --surface-strong:#f0f1f5;
  --border:rgba(17,24,39,.16);
  --nav-bg:#f6f7fb;
}