/* ==========================================================================
   WINDOW.CSS — the reusable "OS window" component
   Used by every panel: About, Contact, Software, Featured Works.
   Markup pattern:

   <section class="window">
     <div class="window__titlebar"><span>Label</span></div>
     <div class="window__body"> ...content... </div>
   </section>
   ========================================================================== */

.window {
  background: var(--color-window-bg);
  border: var(--window-border-width) solid var(--color-border);
  border-radius: var(--window-radius);
  box-shadow: var(--window-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* keeps titlebar corners clean */
}

.window__titlebar {
  height: var(--titlebar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: var(--window-border-width) solid var(--color-border);

  /* pinstripe pattern */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--titlebar-stripe-color-a) 0,
    var(--titlebar-stripe-color-a) 1px,
    var(--titlebar-stripe-color-b) 1px,
    var(--titlebar-stripe-color-b) var(--titlebar-stripe-size)
  );
}

.window__titlebar span {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border-soft);
  padding: 1px var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--fs-titlebar);
  letter-spacing: 0.5px;
  color: var(--color-text);
}

.window__body {
  padding: var(--space-lg);
  flex: 1;
}

/* A muted inset sub-panel used inside windows (e.g. the Designer/Programmer
   boxes, or could be reused elsewhere you want a "recessed" look) */
.subpanel {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border-soft);
  padding: var(--space-md);
}

/* Small OS-style button, e.g. "Designer Resume" */
.btn-chrome {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--color-button-bg);
  border: 1px solid var(--color-border);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-text);
  text-decoration: none;
}

.btn-chrome:hover {
  background: var(--color-button-bg-hover);
}

.btn-chrome__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}