/* ============================================================
   Design tokens — single source of truth for OS visual language.
   Swap values here to re-skin everything.
   ============================================================ */

:root {
  /* Core palette */
  --color-bg:        #0a0a0c;
  --color-fg:        #ffffff;
  --color-muted:     #e8ecf0;
  --color-border:    #e4e4e7;
  --color-primary:   #18181b;
  --color-on-primary:#ffffff;
  --color-accent:    #3b82f6;
  --color-destructive:#dc2626;
  --color-ring:      #ffffff;

  /* Glass / OS surfaces */
  --glass-surface:        rgba(255,255,255,0.10);
  --glass-surface-strong: rgba(255,255,255,0.18);
  --glass-border:         rgba(255,255,255,0.20);
  --glass-divider:        rgba(255,255,255,0.40);
  --menubar-bg:           rgba(0,0,0,0.18);

  /* Window chrome */
  --win-bg:        #ffffff;
  --win-titlebar:  #e8e8e8;
  --win-titlebar-fg: #3f3f46;
  --win-border:    rgba(0,0,0,0.12);
  --win-radius:    14px;

  /* Traffic lights (macOS-style window controls) */
  --tl-red:    #ff5f56;
  --tl-yellow: #ffbd2e;
  --tl-green:  #27c93f;
  --tl-idle:   #5f6368;

  /* Desktop icon selection */
  --icon-select-bg:    rgba(59,130,246,0.80); /* blue-500/80 */
  --icon-hover-overlay: rgba(156,163,175,0.30); /* gray-400/30 */

  /* Type */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --font-serif:   'Source Serif Pro', Georgia, serif;
  /* Brand font — used for menubar brand + splash + logo headings.
     Production: install "Monument Extended" (PangramPangram, paid).
     Falls back to Saira (Google Fonts, free) with width+italic that
     approximates the same wide-italic Y2K feel. */
  --font-brand:   'Monument Extended', 'Saira', 'Inter', ui-sans-serif, sans-serif;

  /* Type scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;

  /* Motion */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;

  /* Z scale */
  --z-base:     0;
  --z-icons:   10;
  --z-window:  20;
  --z-window-active: 30;
  --z-menubar: 50;
  --z-dock:    100;
  --z-launcher: 200;
  --z-splash:  9999;

  /* Layout */
  --menubar-h: 1.75rem;     /* 28px */
  --dock-pad:  0.5rem;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   Base resets
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* desktop OS: no page scroll */
}
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
button { font: inherit; color: inherit; }

/* Disable image dragging on desktop icons (we handle drag ourselves) */
img { user-select: none; -webkit-user-drag: none; }

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}