@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";

/* src/styles.css */
:root {
  --bg-app: #eef1f5;
  --bg-window: #f8f9fb;
  --bg-workspace: #eceff4;
  --bg-workspace-grid: #e2e6ed;
  --bg-panel: rgba(255, 255, 255, 0.88);
  --bg-panel-solid: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.08);
  --bg-subtle: #f2f4f7;
  --bg-control: #f0f2f5;
  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-medium: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.2);
  --border-active: #0071e3;
  --apple-blue: #0071e3;
  --apple-blue-hover: #0077ed;
  --apple-blue-subtle: rgba(0, 113, 227, 0.1);
  --apple-blue-border: rgba(0, 113, 227, 0.3);
  --apple-indigo: #5856d6;
  --apple-purple: #af52de;
  --apple-pink: #ff2d55;
  --apple-red: #ff3b30;
  --apple-orange: #ff9500;
  --apple-yellow: #ffcc00;
  --apple-green: #34c759;
  --apple-teal: #30b0c7;
  --text-primary: #1d1d1f;
  --text-secondary: #515154;
  --text-tertiary: #86868b;
  --text-quaternary: #aeaeb2;
  --text-inverse: #ffffff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-canvas: 0 12px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --font-mono:
    "SF Mono",
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
  background-color: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  user-select: none;
}
:focus-visible {
  outline: 2px solid var(--apple-blue);
  outline-offset: 1px;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}
button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.checkerboard-pattern {
  background-color: #ffffff;
  background-image:
    linear-gradient(
      45deg,
      #f0f0f2 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #f0f0f2 25%,
      transparent 25%),
    linear-gradient(
      45deg,
      transparent 75%,
      #f0f0f2 75%),
    linear-gradient(
      -45deg,
      transparent 75%,
      #f0f0f2 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0px;
}
.frosted-glass {
  background-color: var(--bg-panel);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */