@import "tailwindcss";
@import "tw-animate-css";
/* @import "../styles/leaflet.css"; */
@import 'leaflet/dist/leaflet.css';
/* dark variant helper */
@custom-variant dark (&:is(.dark *));

/* expose CSS variables to Tailwind tokens */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-destructive: var(--destructive);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
 
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-grey: var(--text-grey);
  --color-text-light-grey: var(--text-light-grey);
  --color-text-disabled: var(--text-disabled);
  --color-text-accent: var(--text-accent);
  --color-text-link: var(--text-link);
  --color-text-success: var(--text-success);
  --color-text-info: var(--text-info);
  --color-text-warning: var(--text-warning);
  --color-text-error: var(--text-error);
 
  --color-icon: var(--icon);
  --color-icon-grey: var(--icon-grey);
  --color-icon-light-grey: var(--icon-light-grey);
  --color-icon-accent: var(--icon-accent);
  --color-icon-success: var(--icon-success);
  --color-icon-info: var(--icon-info);
  --color-icon-warning: var(--icon-warning);
  --color-icon-error: var(--icon-error);
}

/* ========= LIGHT THEME ========= */
:root {
  --radius: 0.625rem;

  /* Surfaces */
  --background: #FFFFFF;           /* surface-white */
  --foreground: #131927;           /* text-primary-black */
  --card: #FFFFFF;
  --card-foreground: #131927;

  --muted: #F9FAFB;                /* surface-grey */
  --muted-foreground: #6D717F;     /* text-secondary-dark-gray */
  --border: #D2D5DB;               /* text-light-grey used as border */

  /* Inputs */
  --input: #FFFFFF;
  --input-border: #D2D5DB;
  --input-placeholder: #9EA2AE;    /* text-grey */
  --ring: #4E61F6;                 /* accent as focus ring */

  /* Brand */
  --primary: #212967;              /* brand dark/navy */
  --primary-foreground: #FFFFFF;

  --secondary: #FFAA00;            /* highlight/orange */
  --secondary-foreground: #131927; /* good contrast on orange */

  --accent: #0C2F58;               /* links / secondary CTAs */
  --accent-foreground: #FFFFFF;

  /* States */
  --destructive: #EE443F;

  /* Charts (harmonized with palette) */
  --chart-1: #4E61F6;  /* accent */
  --chart-2: #43B75D;  /* success */
  --chart-3: #0095FF;  /* info */
  --chart-4: #FFAA00;  /* secondary */
  --chart-5: #9EA2AE;  /* neutral */
  
  --text-primary: #131927;
  --text-secondary: #6D717F;
  --text-grey: #9EA2AE;
  --text-light-grey: #D2D5DB;
  --text-disabled: #9EA2AE;
  --text-accent: #4E61F6;
  --text-link: #4E61F6;
  --text-success: #43B75D;
  --text-info: #0095FF;
  --text-warning: #FFAA00;
  --text-error: #EE443F;

  --icon: #131927;
  --icon-grey: #9EA2AE;
  --icon-light-grey: #D2D5DB;
  --icon-accent: #4E61F6;
  --icon-success: #43B75D;
  --icon-info: #0095FF;
  --icon-warning: #FFAA00;
  --icon-error: #EE443F;
}

/* ========= DARK THEME ========= */
.dark {
  /* Surfaces */
  --background: #131927;           /* surface-black */
  --foreground: #FFFFFF;
  --card: #182030;                 /* slightly lighter than bg */
  --card-foreground: #FFFFFF;

  --muted: #20354A;
  --muted-foreground: #CBD5E1;
  --border: #334155;

  /* Inputs */
  --input: #182030;
  --input-border: #475569;
  --input-placeholder: #94A3B8;
  --ring: #4E61F6;                 /* keep accent ring */

  /* Brand */
  --primary: #EDEFFE;              /* light accent surface as primary fill */
  --primary-foreground: #131927;   /* readable on light fill */

  --secondary: #FFAA00;
  --secondary-foreground: #131927;

  --accent: #4E61F6;
  --accent-foreground: #FFFFFF;

  /* Charts tuned for dark */
  --chart-1: #4E61F6;
  --chart-2: #43B75D;
  --chart-3: #58A6FF;
  --chart-4: #FACC15;
  --chart-5: #FB923C;
  
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-grey: #CBD5E1;
  --text-light-grey: #94A3B8;
  --text-disabled: #94A3B8;
  --text-accent: #4E61F6;
  --text-link: #4E61F6;
  --text-success: #43B75D;
  --text-info: #58A6FF;
  --text-warning: #FACC15;
  --text-error: #EE443F;

  --icon: #FFFFFF;
  --icon-grey: #CBD5E1;
  --icon-light-grey: #94A3B8;
  --icon-accent: #4E61F6;
  --icon-success: #43B75D;
  --icon-info: #58A6FF;
  --icon-warning: #FACC15;
  --icon-error: #EE443F;
}

/* ========= BASE ========= */
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }

  /* form fields */
  input, textarea, select {
    @apply border bg-[color:var(--input)]
           placeholder-[color:var(--input-placeholder)]
           border-[color:var(--input-border)]
           rounded-md px-3 py-2 text-sm;
  }
  input:focus, textarea:focus, select:focus {
    @apply ring-2 ring-[color:var(--ring)] outline-none
           border-[color:var(--accent)];
  }

  /* buttons (defaults) */
  /* button {
    @apply inline-flex items-center justify-center gap-2
           rounded-md px-4 py-2 font-medium
           bg-[color:var(--primary)] text-[color:var(--primary-foreground)]
           hover:opacity-90 transition;
  } */

  /* helpers for semantic buttons (use with class) */
  .btn-secondary { @apply bg-[color:var(--secondary)] text-[color:var(--secondary-foreground)]; }
  .btn-accent    { @apply bg-[color:var(--accent)]    text-[color:var(--accent-foreground)]; }
  .btn-muted     { @apply bg-[color:var(--muted)]     text-foreground; }
  .btn-outline   { @apply bg-transparent border text-foreground; }
}

/* optional: link color matches accent */
/* a { color: var(--text-link); } */
a:hover { text-decoration: underline; }



a[href*="featurable.com"] {
  display: none !important;
  visibility: hidden !important;
}