/* ==========================================================================
   THEMES — every colour in the OS comes from these tokens.
   Themes: pink (default) · chrome · purple · dark · blue (classic 95) · glitter (secret)
   ========================================================================== */

:root,
:root[data-theme="pink"],
[data-preview="pink"] {
  --face: #ffe1f0;          /* window / button face */
  --face-2: #ffd2e7;        /* toolbars, darker panels */
  --hl: #ffffff;            /* outer highlight */
  --lt: #fff4fa;            /* inner highlight */
  --sh: #d77aa9;            /* inner shadow */
  --dk: #5e1a3f;            /* outer shadow */
  --text: #3a0d25;
  --text-soft: #7c3b5f;
  --field: #ffffff;
  --field-text: #3a0d25;
  --paper: #fffafc;

  --title-a: #ff2d8f;
  --title-b: #ffa3d4;
  --title-text: #ffffff;
  --title-in-a: #b98ea5;
  --title-in-b: #e9d3df;
  --title-in-text: #fff6fb;

  --accent: #ff2d8f;
  --accent-2: #a855f7;
  --accent-3: #38bdf8;
  --accent-soft: #ffc2df;
  --select: #e8157b;
  --select-text: #ffffff;
  --link: #c20068;
  --ok: #1f9d55;

  --desk-label: #ffffff;
  --desk-label-shadow: #003c3c;

  --wallpaper: linear-gradient(#008080, #008080);


  color-scheme: light;
}

:root[data-theme="chrome"],
[data-preview="chrome"] {
  --face: #e4e7ee;
  --face-2: #d3d8e2;
  --hl: #ffffff;
  --lt: #f5f7fb;
  --sh: #98a0b3;
  --dk: #2e3240;
  --text: #1d2130;
  --text-soft: #4d5467;
  --field: #ffffff;
  --field-text: #1d2130;
  --paper: #ffffff;

  --title-a: #5b6378;
  --title-b: #c9d0de;
  --title-text: #ffffff;
  --title-in-a: #a3a9b6;
  --title-in-b: #d8dce4;
  --title-in-text: #f3f4f7;

  --accent: #ff3d9a;
  --accent-2: #7c83ff;
  --accent-3: #33c3f0;
  --accent-soft: #ffd0e7;
  --select: #4b5372;
  --select-text: #ffffff;
  --link: #c4166f;

  --desk-label: #ffffff;
  --desk-label-shadow: #2e3240;

  --wallpaper:
    repeating-linear-gradient(115deg, rgba(255,255,255,.0) 0 22px, rgba(255,255,255,.18) 22px 23px),
    radial-gradient(ellipse at 30% 20%, #ffffff 0, transparent 40%),
    radial-gradient(ellipse at 80% 85%, #ffd6ec 0, transparent 45%),
    linear-gradient(170deg, #eef1f6 0%, #b8c0cf 45%, #e6e9f0 55%, #8c95a8 100%);

}

:root[data-theme="purple"],
[data-preview="purple"] {
  --face: #ece2ff;
  --face-2: #dfd0ff;
  --hl: #ffffff;
  --lt: #f7f2ff;
  --sh: #9b7bdc;
  --dk: #33186e;
  --text: #22103f;
  --text-soft: #56407d;
  --field: #ffffff;
  --field-text: #22103f;
  --paper: #fdfbff;

  --title-a: #6d28d9;
  --title-b: #d8b4fe;
  --title-text: #ffffff;
  --title-in-a: #a193bd;
  --title-in-b: #ddd4ec;
  --title-in-text: #f7f3ff;

  --accent: #9333ea;
  --accent-2: #ff4fa3;
  --accent-3: #22d3ee;
  --accent-soft: #e9d5ff;
  --select: #6d28d9;
  --select-text: #ffffff;
  --link: #7e22ce;

  --desk-label: #ffffff;
  --desk-label-shadow: #33186e;

  --wallpaper:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' shape-rendering='crispEdges'%3E%3Cg fill='%23fff' fill-opacity='.28'%3E%3Cpath d='M20 10h2v10h-2zM16 14h10v2H16zM18 12h6v6h-6z'/%3E%3Cpath d='M60 50h2v2h-2zM10 60h2v2h-2zM50 22h2v2h-2z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 20% 15%, #f3e8ff 0, transparent 45%),
    radial-gradient(ellipse at 85% 80%, #ffc8e6 0, transparent 50%),
    linear-gradient(160deg, #c4a1ff 0%, #8b5cf6 50%, #c9a7ff 100%);

}

:root[data-theme="dark"],
[data-preview="dark"] {
  --face: #2b2031;
  --face-2: #231a28;
  --hl: #6a5572;
  --lt: #44354b;
  --sh: #160f1a;
  --dk: #000000;
  --text: #ffe6f3;
  --text-soft: #d9aecb;
  --field: #16101a;
  --field-text: #ffe6f3;
  --paper: #1d1622;

  --title-a: #ff2d8f;
  --title-b: #6b1648;
  --title-text: #ffffff;
  --title-in-a: #4a3a52;
  --title-in-b: #2f2535;
  --title-in-text: #b9a3c2;

  --accent: #ff4fa3;
  --accent-2: #c084fc;
  --accent-3: #67e8f9;
  --accent-soft: #5a1f43;
  --select: #ff2d8f;
  --select-text: #ffffff;
  --link: #ff8cc6;
  --ok: #4ade80;

  --desk-label: #ffe6f3;
  --desk-label-shadow: #000000;

  --wallpaper:
    linear-gradient(rgba(255, 79, 163, .09) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 79, 163, .09) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(ellipse at 50% 110%, #5c1741 0, transparent 60%),
    radial-gradient(ellipse at 10% 0%, #2a1240 0, transparent 50%),
    linear-gradient(180deg, #0f0a12 0%, #1b0f1f 100%);


  color-scheme: dark;
}

/* Classic Windows 95 — the one that looks like the real thing */
:root[data-theme="blue"],
[data-preview="blue"] {
  --face: #c0c0c0;
  --face-2: #b4b4b4;
  --hl: #ffffff;
  --lt: #dfdfdf;
  --sh: #808080;
  --dk: #0a0a0a;
  --text: #000000;
  --text-soft: #3d3d3d;
  --field: #ffffff;
  --field-text: #000000;
  --paper: #ffffff;

  --title-a: #000080;
  --title-b: #1084d0;
  --title-text: #ffffff;
  --title-in-a: #808080;
  --title-in-b: #b5b5b5;
  --title-in-text: #d4d0c8;

  --accent: #000080;
  --accent-2: #008080;
  --accent-3: #1084d0;
  --accent-soft: #c7d7f2;
  --select: #000080;
  --select-text: #ffffff;
  --link: #0000ee;

  --desk-label: #ffffff;
  --desk-label-shadow: transparent;

  --wallpaper: linear-gradient(#008080, #008080);

}

/* 💎 Secret theme — unlocked via secret.exe or the Konami code */
:root[data-theme="glitter"],
[data-preview="glitter"] {
  --face: #ffe6f4;
  --face-2: #ffd4eb;
  --hl: #ffffff;
  --lt: #fff5fb;
  --sh: #e072b0;
  --dk: #5b0f3d;
  --text: #3a0d25;
  --text-soft: #80305f;
  --field: #ffffff;
  --field-text: #3a0d25;
  --paper: #fffafd;

  --title-a: #ff2d8f;
  --title-b: #b388ff;
  --title-text: #ffffff;
  --title-in-a: #c79bb5;
  --title-in-b: #ead7e6;
  --title-in-text: #fff6fb;

  --accent: #ff1f8e;
  --accent-2: #9d4dff;
  --accent-3: #29c5ff;
  --accent-soft: #ffc2e3;
  --select: #ff1f8e;
  --select-text: #ffffff;
  --link: #c20068;

  --desk-label: #ffffff;
  --desk-label-shadow: #7a0f4b;

  --wallpaper:
    radial-gradient(circle at 12% 18%, #fff 0 1.5px, transparent 2.5px) 0 0 / 38px 38px,
    radial-gradient(circle at 60% 70%, #fff 0 1px, transparent 2px) 0 0 / 23px 23px,
    radial-gradient(circle at 30% 40%, #ffe3f5 0 1px, transparent 2px) 0 0 / 17px 17px,
    conic-gradient(from 200deg at 60% 40%, #ff6fb5, #c77dff, #7ad7ff, #ff9fd0, #ff6fb5);

}