/* Under .excalidraw, variables from @excalidraw/excalidraw/index.css take precedence.
   This is a fallback to keep the same appearance for the outer DOM. */
/* === Excalidraw tokens bridge (light defaults) === */
:root {
  --ui-font:
    Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, sans-serif;

  /* sizes / radii */
  --font-size-sm: 0.75rem;
  --border-radius-lg: 0.5rem;
  --lg-button-size: 2.25rem;
  --lg-icon-size: 1rem;
  --default-button-size: 2rem;
  --default-icon-size: 1rem;

  /* spacing */
  --space-factor: 0.25rem;
}

:root.light {
  /* surfaces / text */
  --color-surface-high: #f1f0ff;
  --color-surface-mid: #f6f6f9;
  --color-surface-low: #ececf4;
  --color-surface-lowest: #ffffff;
  --color-on-surface: #1b1b1f;

  /* primary / brand */
  --color-primary: #6965db;
  --color-primary-darker: #5b57d1;
  --color-primary-darkest: #4a47b1;
  --color-primary-light: #e3e2fe;
  --color-primary-light-darker: #d7d5ff;
  --color-primary-hover: #5753d0;
  --color-on-primary-container: #030064;
  --color-brand-active: #4440bf;
  --color-brand-hover: #5753d0;

  /* inputs / borders */
  --input-bg-color: #ffffff;
  --input-border-color: #ced4da;
  --default-border-color: var(--color-surface-high);

  /* interaction */
  --button-hover-bg: var(--color-surface-high);
  --button-active-bg: var(--color-surface-high);
  --button-active-border: var(--color-brand-active);
}

:root.dark {
  /* surfaces / text */
  --color-surface-high: #2e2d39;
  --color-surface-mid: hsl(240 6% 10%);
  --color-surface-low: hsl(240, 8%, 15%);
  --color-surface-lowest: hsl(0, 0%, 7%);
  --color-on-surface: #e3e3e8;

  /* primary / brand */
  --color-primary: #a8a5ff;
  --color-primary-darker: #b2aeff;
  --color-primary-darkest: #beb9ff;
  --color-primary-light: #4f4d6f;
  --color-primary-light-darker: #43415e;
  --color-primary-hover: #bbb8ff;
  --color-on-primary-container: #e0dfff;
  --color-brand-active: #d0ccff;
  --color-brand-hover: #bbb8ff;

  /* inputs / borders */
  --input-bg-color: #31303b;
  --input-border-color: #444;
  --default-border-color: var(--color-surface-high);

  /* interaction */
  --button-hover-bg: var(--color-surface-high);
  --button-active-bg: var(--color-surface-high);
  --button-active-border: var(--color-brand-active);
}

:root.dark .excalidraw .animate-config {
  /* Direct values because var(--input-bg-color) doesn't resolve here */
  --animate-config-input-bg-color: #31303b;
}

html,
body,
#root {
  background: var(--color-surface-lowest);
}

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family:
    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.Viewer-container svg {
  width: 100%;
  height: 100%;
}

.GitHubCorner-container:hover .GitHubCorner-octo-arm {
  animation: GitHubCorner-octocat-wave 560ms ease-in-out;
}

@keyframes GitHubCorner-octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .GitHubCorner-container:hover .GitHubCorner-octo-arm {
    animation: none;
  }
  .GitHubCorner-octo-arm {
    animation: GitHubCorner-octocat-wave 560ms ease-in-out;
  }
}

@media (max-width: 300px) {
  .GitHubCorner-container {
    display: none;
  }
}

/* Excalidraw styles: colors, size, border radius for outer DOM */
.app-button {
  height: var(--lg-button-size);
  padding: 0 0.625rem;
  line-height: 0;
  background: var(--color-surface-low);
  border: none; /* Excalidraw often uses a 1px outline shadow instead of a border */
  border-radius: var(--border-radius-lg);
  color: var(--color-on-surface);
  box-shadow: 0 0 0 1px var(--color-surface-lowest);

  font-family: var(--ui-font);
  font-size: var(--font-size-sm);
  letter-spacing: 0.4px;
  cursor: pointer;
}

.app-button-compact {
  height: calc(var(--default-button-size) * 0.5);
  z-index: 10;
}

.app-button[disabled],
.app-button[aria-disabled='true'] {
  opacity: 0.5;
  border-color: var(--default-border-color);
  cursor: not-allowed;
  pointer-events: none;
}

.app-button:hover {
  background: var(--button-hover-bg);
}
.app-button:active {
  background: var(--button-active-bg);
}

/* Dark mode: brighten only the 'File...' button in AnimateConfig for better contrast */
:root.dark .excalidraw .animate-config label[for='pointerFile'].app-button {
  background: hsl(240 8% 20%);
  box-shadow: 0 0 0 1px hsl(240 8% 25%);
}

.app-input {
  height: var(--lg-button-size);
  box-sizing: border-box;
  border: 1.5px solid var(--input-border-color);
  border-radius: var(--space-factor);
  font-size: var(--font-size-sm);
  min-width: 200px;
  background: var(--animate-config-input-bg-color, var(--input-bg-color));
  color: var(--color-on-surface);
}

.app-input:not(:focus):hover {
  border-color: var(--color-brand-hover);
}
.app-input:focus {
  outline: none;
  border-color: var(--color-brand-hover);
}

.toolbar {
  min-height: var(--lg-button-size);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  row-gap: 0.5rem;
  padding-block: 1rem 0; /* top and bottom */
  padding-inline: 3rem 0; /* left and right */
  transition: opacity 0.2s ease;
}

.toolbar form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Hidden state: keeps height, disables interaction, and only hides visually */
.toolbar--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
}

.modal-panel {
  background: var(--color-surface-lowest);
  color: var(--color-on-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 1rem;
  min-width: 320px;
  font-family: var(--ui-font);
}
:root.dark .modal-panel {
  background: var(--color-surface-high);
}

.modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.app-button--primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: none;
  font-weight: 600;
}
.app-button--primary:hover,
.app-button--primary:active {
  background: var(--color-primary);
  color: #ffffff;
  cursor: pointer;
}
:root.dark .app-button--primary,
:root.dark .app-button--primary:hover,
:root.dark .app-button--primary:active {
  color: #000000;
}