/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Application styles */

:root {
  --app-primary: hsl(213.93, 71.186%, 60%);
  --app-muted: hsl(0, 0%, 50%);
  --debug-color: oklch(72.4% 0.187 231.88 / 0.5);
  --debug-section: oklch(72.4% 0.187 231.88 / 0.1);
  --app-danger: hsl(0, 100%, 40%);
  --font-code: 'JetBrains Mono', monospace;
  --dark: var(--gray-11);
  --light: hsl(0, 0%, 100%);

  --brand: var(--blue-5);
  --secondary: var(--purple-5);
  --surface-1: var(--gray-2);
  --surface-2: var(--gray-3);
  --surface-3: var(--gray-4);
  --surface-4: var(--gray-5);
  --text-1: var(--gray-12);
  --text-2: var(--gray-8);

  --breakpoint-sm: 30em;
  --breakpoint-md: 60em;
  --breakpoint-lg: 90em;
  --breakpoint-xl: 120em;

  --space-xs: 0.125rem;
  --space-sm: 0.25rem;
  --space-md: 0.5rem;
  --space-lg: 1rem;
  --space-xl: 2rem;

  @media (prefers-color-scheme:dark), body.theme-dark {
    --surface-1: var(--gray-12);
    --surface-2: var(--gray-11);
    --surface-3: var(--gray-10);
    --surface-4: var(--gray-9);
    --text-1: var(--gray-1);
    --text-2: var(--gray-6);
    --secondary: hsl(267.27, 84.615%, 66.863%);
  }
}

/* Theme Utilities */
.brand {
  color: var(--brand);
}

.bg-brand {
  background-color: var(--brand);
}

.text-1 {
  color: var(--text-1);
}

.text-2 {
  color: var(--text-2);
}

.muted {
  color: var(--app-muted)
}

.bg-surface-1 {
  background-color: var(--surface-1);
}

.bg-surface-2 {
  background-color: var(--surface-2);
}

.bg-surface-3 {
  background-color: var(--surface-3);
}

.bg-surface-4 {
  background-color: var(--surface-4);
}

.shadow-1 {
  box-shadow: var(--shadow-1) !important;
}

.shadow-2 {
  box-shadow: var(--shadow-2) !important;
}

.shadow-3 {
  box-shadow: var(--shadow-3) !important;
}

.shadow-4 {
  box-shadow: var(--shadow-4) !important;
}

.shadow-5 {
  box-shadow: var(--shadow-5) !important;
}

.shadow-6 {
  box-shadow: var(--shadow-6) !important;
}

.jetbrains-mono {
  font-family: 'JetBrains Mono NL', sans-serif;
}

/* Tachyons color add ons */
.primary {
  color: var(--app-primary);
}

.bg-primary {
  background-color: var(--app-primary);
}

.b--primary {
  border-color: var(--app-primary);
}

.hover-primary:hover,
.hover-primary:focus {
  color: var(--app-primary);
}

.hover-bg-primary:hover,
.hover-bg-primary:focus {
  background-color: var(--app-primary);
}


a:not([class]) {
  font-weight: 500;
  color: var(--text-1);

  &:hover {
    opacity: .5
  }

  &:focus {
    opacity: .5
  }

  &:active {
    opacity: .8;
    transition: opacity .15s ease-out;
  }
}


html,
body {
  scroll-behavior: smooth;
  font-family: 'JetBrains Mono NL', sans-serif;
  background-color: var(--surface-3);
  line-height: var(--font-lineheight-3);
  /*-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing:grayscale;*/
}

#notifications {
  z-index: 9999;

  div {
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

/* Notification animations */
.notification-enter {
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
}

.notification-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.notification-exit {
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
}