/* =====================================================
   CSS DESIGN TOKENS
   ===================================================== */
:root {
  /* Traffic lights */
  --traffic-red:            #ff5f57;
  --traffic-yellow:         #febc2e;
  --traffic-green:          #28c840;
  --traffic-red-glyph:      #c03e3a;
  --traffic-yellow-glyph:   #c9871b;
  --traffic-green-glyph:    #159623;

  /* Window chrome — light */
  --titlebar-bg-light:      rgba(236, 236, 236, 0.92);
  --window-bg-light:        rgba(255, 255, 255, 0.88);

  /* Window chrome — dark */
  --titlebar-bg-dark:       rgba(40, 40, 40, 0.92);
  --window-bg-dark:         rgba(30, 30, 30, 0.88);

  /* Semantic window tokens (default = light) */
  --titlebar-bg:            var(--titlebar-bg-light);
  --window-bg:              var(--window-bg-light);

  /* Window dimensions */
  --window-radius:          12px;
  --window-shadow:          0 22px 70px rgba(0, 0, 0, 0.45);
  --titlebar-height:        36px;

  /* Window sizes */
  --window-bio-width:       480px;
  --window-bio-height:      360px;
  --window-large-width:     760px;
  --window-large-height:    540px;

  /* Dock */
  --dock-bg-light:          rgba(210, 210, 210, 0.55);
  --dock-bg-dark:           rgba(40, 40, 40, 0.55);
  --dock-bg:                var(--dock-bg-light);
  --dock-blur:              blur(20px);
  --dock-radius:            16px;
  --dock-height:            72px;
  --dock-padding:           8px 12px;
  --dock-icon-size:         56px;

  /* Menu bar */
  --menubar-bg-light:       rgba(235, 235, 235, 0.72);
  --menubar-bg-dark:        rgba(28, 28, 28, 0.72);
  --menubar-bg:             var(--menubar-bg-light);
  --menubar-blur:           blur(20px);
  --menubar-height:         28px;
  --menubar-text-light:     rgba(0, 0, 0, 0.85);
  --menubar-text-dark:      rgba(255, 255, 255, 0.90);
  --menubar-text:           var(--menubar-text-light);

  /* Typography */
  --font-system:            -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                             'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-size-ui:           13px;

  /* Z-index layers */
  --z-desktop:              0;
  --z-window-base:          100;
  --z-dock:                 300;
  --z-menubar:              400;
  --z-mobile:               9999;
}

/* Dark mode token overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --titlebar-bg:   var(--titlebar-bg-dark);
    --window-bg:     var(--window-bg-dark);
    --dock-bg:       var(--dock-bg-dark);
    --menubar-bg:    var(--menubar-bg-dark);
    --menubar-text:  var(--menubar-text-dark);
  }
}

/* =====================================================
   DESKTOP LAYOUT
   ===================================================== */
#desktop {
  position: fixed;
  top: 28px;           /* below menu bar (--menubar-height) */
  bottom: 92px;        /* above dock: 72px dock + 10px bottom offset + 10px buffer */
  left: 0;
  right: 0;
  z-index: var(--z-desktop);
  font-family: var(--font-system);
  font-size: var(--font-size-ui);
  /* restrictRect 'parent' on windows uses this element as constraint boundary */
}

/* =====================================================
   WALLPAPER  (DESK-01)
   ===================================================== */
#wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;               /* behind everything */
  width: 100%;
  height: 100%;
}

#wallpaper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =====================================================
   CUSTOM CURSOR  (DESK-03)
   ===================================================== */
*, *::before, *::after {
  cursor: auto;
}

a, button, [role="button"], .dock-icon {
  cursor: pointer;
}

/* Force arrow cursor everywhere during window drag */
body.is-dragging,
body.is-dragging * {
  cursor: grabbing !important;
}

/* =====================================================
   MOBILE MESSAGE  (DESK-04)
   ===================================================== */
#mobile-message {
  display: none;
}

@media (max-width: 767px) {
  /* Hide all desktop chrome on mobile */
  #desktop,
  #menubar,
  #dock {
    display: none !important;
  }

  /* Show mobile message */
  #mobile-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    width: 100%;
    background: #1a1a2e;
    color: #ffffff;
    font-family: var(--font-system);
    text-align: center;
    padding: 2rem;
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile);
  }

  #mobile-message .mobile-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1;
  }

  #mobile-message h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    letter-spacing: -0.02em;
  }

  #mobile-message p {
    opacity: 0.65;
    max-width: 280px;
    line-height: 1.5;
    font-size: 0.95rem;
  }
}

/* =====================================================
   WALLPAPER GRADIENT FALLBACK  (DESK-01)
   ===================================================== */
/* Fallback if WebP files are missing — inline gradient approximation */
body {
  background: linear-gradient(135deg, #2d1b69 0%, #11998e 40%, #e6b980 100%);
}

@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #0d0d1a 0%, #0a3d3a 45%, #2d1b00 100%);
  }
}