@import "tailwindcss";

@theme {
  --color-secondary: #54634d;
  --color-tertiary: #54634c;
  --color-background: #f8faf7;
  --color-on-tertiary: #edfedf;
  --color-on-tertiary-fixed: #3e4c36;
  --color-on-error-container: #6e1400;
  --color-surface-container-low: #f1f5f1;
  --color-tertiary-fixed-dim: #d7e8ca;
  --color-surface: #f8faf7;
  --color-outline-variant: #acb4af;
  --color-on-surface-variant: #59615d;
  --color-on-secondary: #edfee2;
  --color-on-background: #2d3431;
  --color-surface-container-lowest: #ffffff;
  --color-surface-tint: #526448;
  --color-on-error: #fff7f6;
  --color-secondary-fixed-dim: #c8dabe;
  --color-surface-container-highest: #dde4e0;
  --color-outline: #757c79;
  --color-tertiary-container: #e5f6d7;
  --color-secondary-container: #d6e8cc;
  --color-secondary-dim: #485742;
  --color-error-container: #fd795a;
  --color-on-primary-container: #45573c;
  --color-tertiary-dim: #495740;
  --color-on-surface: #2d3431;
  --color-inverse-on-surface: #9b9e9b;
  --color-error-dim: #791903;
  --color-primary-dim: #46583d;
  --color-primary-fixed-dim: #c6dbb8;
  --color-primary: #526448;
  --color-on-secondary-fixed: #35432f;
  --color-surface-bright: #f8faf7;
  --color-primary-container: #d4e9c6;
  --color-on-tertiary-fixed-variant: #5a6951;
  --color-tertiary-fixed: #e5f6d7;
  --color-surface-dim: #d4dcd7;
  --color-on-primary: #ecffdd;
  --color-error: #a73b21;
  --color-inverse-primary: #e2f7d3;
  --color-on-secondary-container: #475641;
  --color-surface-container: #eaefeb;
  --color-primary-fixed: #d4e9c6;
  --color-surface-variant: #dde4e0;
  --color-on-primary-fixed: #33442b;
  --color-secondary-fixed: #d6e8cc;
  --color-inverse-surface: #0c0f0e;
  --color-on-primary-fixed-variant: #4f6145;
  --color-surface-container-high: #e4eae5;
  --color-on-secondary-fixed-variant: #50604a;
  --color-on-tertiary-container: #4f5e47;
}


@layer base {
  body {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    font-family: "Plus Jakarta Sans", sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: "Manrope", sans-serif;
  }
}
/* Custom overrides for Tailwind & MapBox */

.vellum-glass {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.vellum-overlay {
    background-color: rgba(248, 250, 247, 0.8);
    backdrop-filter: blur(24px);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.leaf-card {
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

/* Managing Active Screens */
.screen {
    display: none !important;
}

.screen.active {
    display: block !important;
}
#screen-onboarding.active {
    display: flex !important;
}
#screen-dashboard.active {
    display: block !important;
}

/* Mapbox UI tweaks for Tailwind container */
.mapboxgl-ctrl-geocoder {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    background: transparent !important;
}

.mapboxgl-ctrl-geocoder--input {
    background-color: transparent !important;
    padding-left: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.mapboxgl-ctrl-geocoder--icon {
    display: none !important;
}

/* Suggestion dropdown override */
.suggestions-wrapper {
    position: absolute;
    width: 100%;
    z-index: 50;
    top: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Catalog Folder Shape */
.folder-card {
    position: relative;
    border-radius: 0 16px 16px 16px;
    background-color: var(--color-surface-container-lowest);
    box-shadow: 0 4px 20px rgba(82,100,72,0.06);
    margin-top: 12px;
}
.folder-card::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    width: 45%;
    height: 12px;
    background-color: var(--color-surface-container-lowest);
    border-radius: 12px 12px 0 0;
}