/* colors that will not change in light mode */
:root {
    --shadow: rgba(71, 52, 28, 0.08);
    --shadow-soft: rgba(10, 11, 30, 0.07) 1px 1px 3px 0px;
    --modal-shadow: rgba(10, 11, 30, 0.13) 4px 4px 17px 0px;
    --placeholder: rgba(0,0,0,0.2);
    --green: #00e8ab;
    --green-dark: #3b3c4b;
    --green-soft: #40eec0;
    --accent-yellow: #FFC94A;
    --accent-orange: #FF8A3D;
    --accent-blue: #4AA3FF;
    --border-color: rgba(0,0,0,0.4);
    --border-soft: rgba(0,0,0,0.1);
    --border-light: rgba(0,0,0,0.07);

    --error: #EF5B5B;
    --warning: #FFC94A;
    --card: #FFFFFF;
    --app-border: 1px rgba(0,0,0,0.4) solid;
    --disabled: rgba(0,0,0,0.06);
    --disabled-text: rgba(0,0,0,0.2);
    --brick-rig: rgba(0,0,0,0.08);
    --progress-bar: rgba(0,0,0,0.05);
    --transparent: rgba(0,0,0,0.05);

    /* custom app colors */
    --bg: #f8fafc;
    --bg: #ffffff;
    --bg-second: #f8fafc;
    --card-soft: #f1f5f9;
    --chip-bg: #e2e8f0;
    --chip-text: #64748b;
    --header: #FFFFFF;

    --title: #0f172a;
    --title: hsl(223, 10%, 14%);
    --text-strong: #1e293b;
    --text-strong: hsl(223, 10%, 14%);
    --text: #334155;
    --text: hsl(226, 10%, 32%);
    --text-color: #334155;
    --text-color: hsl(226, 10%, 32%);
    --text-soft: #475569;
    --text-light: #94a3b8;
    --fill-color: #334155;
    --fill-soft: #475569;
    --fill-pink: #ec4899;

    --primary-button: #1e293b;
    --primary-button-text: #FFFFFF;
    --primary-button-soft: #f1f5f9;
    --border: #e2e8f0;
    --border-selected: #4AA3FF;
    --slate: #f8fafc;

}
/*
:root {
    --bg: #FFF8ED;
    --card-soft: #FFF1D9;
    --chip-bg: #F4E7CE;
    --chip-text: #6D5B3E;
    --header: #FFFFFF;

    --title: #26352F;
    --text: #3F4A45;
    --text-color: #3F4A45;
    --text-soft: #8A7F70;
    --text-light: #ada293;
    --fill-color: #3F4A45;
    --fill-soft: #8A7F70;

    --primary-button: #22B573;
    --primary-button-text: #FFFFFF;
    --primary-button-soft: #EAF8F1;
    --border: #ada293;
}
/*
:root {

    --bg: #F4F8FF;
    --card-soft: #EAF2FF;
    --chip-bg: #E7EDF7;
    --chip-text: #334155;
    --header: #FFFFFF;

    --title: #18233A;
    --text: #334155;
    --text-color: #334155;
    --text-soft: #8A97AA;
    --text-light: #a6b1c2;
    --fill-color: #334155;
    --fill-soft: #8A97AA;

    --primary-button: #2563EB;
    --primary-button-text: #FFFFFF;
    --primary-button-soft: #DBEAFE;
    --border: #a6b1c2;
}
:root {
    --bg: #F8F5FF;
    --card-soft: #F0EAFF;
    --chip-bg: #EDE7F8;
    --chip-text: #4A4057;
    --header: #FFFFFF;

    --title: #2D2438;
    --text: #4A4057;
    --text-color: #4A4057;
    --text-soft: #948AA3;
    --text-light: #b0a9bb;
    --fill-color: #4A4057;
    --fill-soft: #948AA3;

    --primary-button: #7C5CFF;
    --primary-button-text: #FFFFFF;
    --primary-button-soft: #EEE9FF;
    --border: #b0a9bb;
}*/

/* #263129 elevated card or popups */
.dark {
    --placeholder: rgba(255, 255, 255, 0.2);
    --bg: #121714;
    --card: #1A211D;
    --card-soft: #222B25;

    --chip-bg: #2A352E;
    --chip-text: #D7C8A8;
    --header: #121714;

    --title: #F7F1E6;
    --text: #D8D2C8;
    --text-color: #D8D2C8;
    --text-soft: #9A9388;
    --text-light: #756F66;
    --fill-color: #D8D2C8;
    --fill-soft: #7e7970;

    --primary-button: #24C47A;
    --primary-button-text: #FFFFFF;
    --primary-button-soft: #163C2A;
    --border: #3A453D;
    --border-color: #3A453D;
    --border-soft: #2A312C;
    --border-strong: #526156;
    --shadow: rgba(0, 0, 0, 0.35);
    --app-border: 1px rgba(255,255,255,0.08) solid;
    --disabled: rgba(255,255,255,0.089);
    --brick-rig: rgba(255, 255, 255, 0.09);
    --progress-bar: rgba(255,255,255,0.09);
    --transparent: rgba(255,255,255,0.09);
    --disabled-text: rgba(255,255,255,0.4);
}

.placeholder, .placeholder svg {
  fill: var(--placeholder);
  stroke: var(--placeholder);
  color: var(--placeholder);
}

.app-border {
    border: var(--app-border);
}
.transparent { background: var(--transparent); }
.background { background-color: var(--bg); }
.bg-second { background-color: var(--bg-second); }
.bg-card { background: var(--card); }
.bg-card-soft { background: var(--card-soft); }
.bg-header { background: var(--header); }
.bg-chip { background: var(--chip-bg); color: var(--chip-text); }

.bg-white { background-color: #fff; }
.hover\:text-white:hover, .text-white { color: #fff; }
.subtitle-color { color: var(--title); }
.text-strong, .hover\:text-strong:hover { color: var(--text-strong); }
.text-color, .hover\:text-color:hover { color: var(--text); }
.text-soft, .hover\:text-soft:hover { color: var(--text-soft); }
.text-light, .hover\:text-light:hover { color: var(--text-light); }
.text-white-transparent { color: rgba(255, 255, 255, 0.1); }
.text-white-transparent\/2 { color: rgba(255, 255, 255, 0.2); }
.text-white-transparent\/3 { color: rgba(255, 255, 255, 0.3); }
.text-white-transparent\/4 { color: rgba(255, 255, 255, 0.4); }
.text-white-transparent\/5 { color: rgba(255, 255, 255, 0.5); }
.text-white-transparent\/6 { color: rgba(255, 255, 255, 0.6); }

.text-dark-transparent { color: rgba(0,0,0, 0.1); }
.text-dark-transparent\/2 { color: rgba(0,0,0, 0.2); }
.text-dark-transparent\/3 { color: rgba(0,0,0, 0.3); }
.text-dark-transparent\/4 { color: rgba(0,0,0, 0.4); }
.text-dark-transparent\/5 { color: rgba(0,0,0, 0.5); }
.text-dark-transparent\/6 { color: rgba(0,0,0, 0.6); }

.fill-white, .fill-white svg { fill: #fff; }
.fill-soft, .fill-soft svg { fill: var(--fill-soft); }
.fill-color, .fill-color svg { fill: var(--fill-color); }
.fill-indigo, .fill-indigo svg { fill: var(--indigo-500); }
.bg-dark-transparent { background: rgba(0,0,0,0.05); }

.hover\:border-color:hover, .border-color { border-color: var(--border); }
.hover\:border-soft:hover, .border-soft { border-color: var(--border-soft); }
.border-light { border-color: var(--border-light); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.modal-shadow { box-shadow: var(--modal-shadow); }
.text-transparent { color: transparent; }
.soft-blur {
    position: relative;
    isolation: isolate; /* evita que el blur escape */
    overflow: hidden;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.08);
}
/* "blobs" con blur */
.soft-blur::before,
.soft-blur::after{
  content: "";
  position: absolute;
  inset: -40%; /* se sale para que el blur no corte */
  z-index: -1;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.75;
  transform: translateZ(0); /* mejora rendimiento */
}
/* Blob principal: verde-lima */
.soft-blur::before{
  background:
    radial-gradient(300px 220px at 15% 20%, rgba(126,241,198,0.7), transparent 65%),
    radial-gradient(280px 220px at 80% 25%, rgba(185,167,255,0.65), transparent 70%);
}
/* Blob secundario: lavanda suave */
.soft-blur::after{
  opacity: 0.55;
  filter: blur(90px);
  background:
    radial-gradient(260px 200px at 85% 80%, rgba(215,200,255,0.7), transparent 65%),
    radial-gradient(260px 200px at 10% 75%, rgba(186,247,200,0.6), transparent 65%);
}
.blurred-surface{
  position: relative;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.blurred-surface::before{
  content:"";
  position:absolute;
  inset:-60px;
  z-index:-1;
  filter: blur(50px);
  opacity: 0.9;
  background:
    radial-gradient(220px 180px at 15% 20%, rgba(126,241,198,0.55), transparent 65%),
    radial-gradient(220px 180px at 85% 25%, rgba(185,167,255,0.55), transparent 70%);
}
.blurry {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    border-radius: 20px;
    text-align: center;
}
.border-selected { border-color: var(--border-selected); }
.bg-selected { 
  background-color: var(--accent-blue);
  color: #fff;
}
.slate-gradient {
  /*from slate to background color*/
  background-image: linear-gradient(180deg, var(--slate), var(--bg));
}