/*
 * 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: hsl(0, 0%, 0%);
  --light: hsl(0, 0%, 100%);

  --brand: hsl(213.93, 71.186%, 60%);
  --secondary: hsl(264.79, 57.895%, 40.98%);
  --surface-1: hsl(0, 0%, 100%);
  --surface-2: hsl(0, 0%, 98%);
  --surface-3: hsl(0, 0%, 95%);
  --surface-4: hsl(0, 0%, 90%);
  --text-1: hsl(0, 0%, 0%);
  --text-2: hsl(0, 0%, 10%);

  --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: hsl(0, 0%, 0%);
    --surface-2: hsl(0, 0%, 5%);
    --surface-3: hsl(0, 0%, 10%);
    --surface-4: hsl(0, 0%, 20%);
    --text-1: hsl(0, 0%, 100%);
    --text-2: hsl(0, 0%, 90%);
    --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;
}