/* ============================================================
   DmytroOS — design tokens (light / dark)
   ============================================================ */

:root {
  color-scheme: light dark;

  /* typography — macOS system scale */
  --font-sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-body: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-xxl: 28px;

  /* radii */
  --r-window: 11px;
  --r-dock: 26px;
  --r-panel: 14px;
  --r-ctl: 7px;
  --r-icon: 22.5%;

  /* z layers */
  --z-windows: 100;
  --z-menubar: 1000;
  --z-dropdown: 1100;
  --z-dock: 1200;
  --z-sheet: 1300;
  --z-spotlight: 1500;
  --z-notif: 1600;
  --z-control: 1700;
  --z-boot: 2000;

  /* chrome constants */
  --menubar-h: 28px;
  --titlebar-h: 36px;
  --dock-size: 52px;

  /* traffic lights — same in both themes */
  --tl-close: #ff5f57;
  --tl-min: #febc2e;
  --tl-zoom: #28c840;

  --glass-blur: blur(24px) saturate(180%);
  --accent: #0a84ff;

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .25, 1);
  --ease-spring: cubic-bezier(.3, 1.3, .4, 1);
}

:root[data-theme="light"] {
  /* real macOS Sequoia wallpaper; the gradient below paints instantly and
     doubles as a fallback while the photo loads */
  --wallpaper-img: url("../assets/img/wallpaper-light.webp");
  --wallpaper:
    radial-gradient(120% 90% at 12% 8%, rgba(255, 184, 222, .85) 0%, rgba(255, 184, 222, 0) 52%),
    radial-gradient(110% 100% at 88% 12%, rgba(120, 192, 255, .9) 0%, rgba(120, 192, 255, 0) 58%),
    radial-gradient(130% 110% at 50% 105%, rgba(255, 168, 120, .85) 0%, rgba(255, 168, 120, 0) 55%),
    radial-gradient(90% 80% at 80% 85%, rgba(186, 132, 255, .7) 0%, rgba(186, 132, 255, 0) 60%),
    linear-gradient(165deg, #aed5ff 0%, #c4b9ff 45%, #ffc9d8 100%);

  --bar-bg: rgba(250, 250, 253, .6);
  --bar-text: #1d1d1f;
  --glass: rgba(255, 255, 255, .52);
  --glass-border: rgba(255, 255, 255, .65);

  --win-bg: #ffffff;
  --win-chrome: #f3f3f6;
  --win-border: rgba(0, 0, 0, .12);
  --win-shadow: 0 22px 70px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .12);
  --win-shadow-inactive: 0 10px 30px rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .1);
  --sidebar-bg: rgba(243, 242, 247, .9);

  --text-1: #1d1d1f;
  --text-2: #515154;
  --text-3: #86868b;
  --separator: rgba(0, 0, 0, .09);
  --ctl-bg: rgba(0, 0, 0, .05);
  --ctl-bg-hover: rgba(0, 0, 0, .09);
  --row-hover: rgba(0, 0, 0, .045);
  --selection: rgba(10, 132, 255, .14);
}

:root[data-theme="dark"] {
  --wallpaper-img: url("../assets/img/wallpaper-dark.webp");
  --wallpaper:
    radial-gradient(120% 90% at 12% 8%, rgba(122, 44, 110, .75) 0%, rgba(122, 44, 110, 0) 55%),
    radial-gradient(110% 100% at 88% 12%, rgba(28, 78, 158, .85) 0%, rgba(28, 78, 158, 0) 58%),
    radial-gradient(130% 110% at 50% 108%, rgba(193, 90, 49, .55) 0%, rgba(193, 90, 49, 0) 55%),
    radial-gradient(90% 80% at 82% 88%, rgba(88, 46, 160, .6) 0%, rgba(88, 46, 160, 0) 60%),
    linear-gradient(165deg, #101a33 0%, #1c1633 48%, #2a1430 100%);

  --bar-bg: rgba(24, 24, 28, .62);
  --bar-text: #f5f5f7;
  --glass: rgba(40, 40, 46, .55);
  --glass-border: rgba(255, 255, 255, .14);

  --win-bg: #1f1f23;
  --win-chrome: #2a2a2e;
  --win-border: rgba(255, 255, 255, .14);
  --win-shadow: 0 22px 70px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .6);
  --win-shadow-inactive: 0 10px 30px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(0, 0, 0, .5);
  --sidebar-bg: rgba(36, 36, 41, .92);

  --text-1: #f5f5f7;
  --text-2: #b8b8bd;
  --text-3: #818187;
  --separator: rgba(255, 255, 255, .1);
  --ctl-bg: rgba(255, 255, 255, .08);
  --ctl-bg-hover: rgba(255, 255, 255, .14);
  --row-hover: rgba(255, 255, 255, .06);
  --selection: rgba(10, 132, 255, .28);
}