/* main.css — Indigo Tech / Neo Lime theme */
/* Tailwind layers */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* === Brand Palette ===
   💎 Indigo Tech:  #3C3C9D
   💚 Neo Lime:     #A6FF4D
   ⚪ Pure White:   #FFFFFF
   🌑 Charcoal:     #212121
*/

/* ---------------------- CSS Variables (light) ---------------------- */
:root{
  /* Brand bases */
  --brand-indigo: #3C3C9D;
  --brand-lime:   #A6FF4D;
  --brand-white:  #FFFFFF;
  --brand-char:   #212121;

  /* Core UI tokens mapped to brand */
  --color-text-primary: var(--brand-char);
  --color-text-muted:   #555a60;       /* softer charcoal */
  --color-border:       #E5E7EB;

  /* Accent = Lime for CTAs; text = charcoal for contrast */
  --color-accent:       var(--brand-lime);
  --color-accent-dark:  #90E63F;       /* hover */
  --color-button-bg:    var(--brand-lime);
  --color-button-hover: #90E63F;
  --color-button-text:  var(--brand-char);

  --color-bg-light:     var(--brand-white);
  --color-bg-dark:      #121212;
  --color-card:         var(--brand-white);

  --color-input-light:  #ffffff;
  --color-input-dark:   #23272f;

  --color-danger:       #DC2626;
  --color-danger-light: #F87171;
  --color-success:      #22C55E;

  --color-placeholder-light: #6B7280;
  --color-placeholder-dark:  #9CA3AF;

  /* rgb triplets (for translucency helpers) */
  --surface: 255 255 255;
  --surface-2: 248 250 252;
  --text: 33 33 33;     /* charcoal */
  --text-2: 90 90 96;   /* muted charcoal */

  /* extra tokens used by utilities */
  --color-border-light: #E5E7EB;
  --color-border-dark:  #2D2D2D;

  /* ring alpha presets (used by ring-border-XX helpers) */
  --color-border-light-60: rgba(229,231,235,0.60);
  --color-border-light-70: rgba(229,231,235,0.70);
  --color-border-dark-60:  rgba(45,45,45,0.60);
  --color-border-dark-70:  rgba(45,45,45,0.70);

  /* brand aliases */
  --indigoTech: var(--brand-indigo);
  --brand-charcoal: var(--brand-char);
}

/* ---------------------- CSS Variables (dark) ---------------------- */
.dark{
  --color-text-primary: var(--brand-white);
  --color-text-muted:   #C9D1D9;
  --color-border:       #2D2D2D;

  --color-accent:       var(--brand-lime);
  --color-accent-dark:  #90E63F;
  --color-button-bg:    var(--brand-lime);
  --color-button-hover: #90E63F;
  --color-button-text:  #121212;       /* preserve contrast on lime */

  --color-bg-light:     #121212;
  --color-bg-dark:      #0A0A0A;
  --color-card:         #161616;

  --color-input-light:  #23272f;
  --color-input-dark:   #18181b;

  --color-placeholder-light: #9CA3AF;
  --color-placeholder-dark:  #6B7280;

  --surface: 18 18 18;
  --surface-2: 10 10 10;
  --text: 241 245 249;
  --text-2: 203 213 225;
}

/* ====================== Global ====================== */
body{
  font-family:'Poppins',Arial,sans-serif;
  background:var(--color-card);
  color:var(--color-text-primary);
  min-height:100vh;
  transition:background .3s,color .3s;
}

/* Focus ring */
:root :focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

/* ====================== Token-mapped utilities used in JSX ====================== */
/* Cards */
.bg-card-light{ background-color:var(--color-card); }
.dark .bg-card-dark{ background-color:var(--color-card); }

/* Text tokens (light/dark) */
.text-text-light-primary{ color:var(--color-text-primary); }
.dark .text-text-dark-primary{ color:var(--color-text-primary); }

.text-text-light-secondary{ color:var(--color-text-muted); }
.dark .text-text-dark-secondary{ color:var(--color-text-muted); }

/* Additional “muted” */
.text-text-light-muted{ color:var(--color-text-muted); }
.dark .text-text-dark-muted{ color:var(--color-text-muted); }

/* Generic aliases some components referenced */
.text-text-primary{ color:var(--color-text-primary); }
.text-text-secondary{ color:var(--color-text-muted); }

.text-muted{ color:var(--color-text-muted); }
.bg-muted{ background-color: rgba(var(--text-2), .14); }

/* Borders + Rings */
.border-border{ border-color:var(--color-border); }
.border-border-light{ border-color:var(--color-border-light); }
.dark .border-border-dark{ border-color:var(--color-border-dark); }

/* Tailwind ring helpers: set --tw-ring-color so ring utilities pick it up */
.ring-border-light{ --tw-ring-color: var(--color-border-light); }
.ring-border-dark{  --tw-ring-color: var(--color-border-dark); }
.ring-border-light\/60{ --tw-ring-color: var(--color-border-light-60); }
.ring-border-light\/70{ --tw-ring-color: var(--color-border-light-70); }
.ring-border-dark\/60{  --tw-ring-color: var(--color-border-dark-60); }
.ring-border-dark\/70{  --tw-ring-color: var(--color-border-dark-70); }

/* Brand helpers */
.bg-indigoTech{ background-color: var(--indigoTech); }
.text-indigoTech{ color: var(--indigoTech); }
.text-brand-charcoal{ color: var(--brand-charcoal); }

/* Accent helpers */
.bg-accent{ background-color: var(--color-accent); }
.bg-accent-dark{ background-color: var(--color-accent-dark); }
.text-button-text{ color: var(--color-button-text); }

/* Accent translucency used in pricing checkmark */
.bg-accent\/20{ background-color: color-mix(in srgb, var(--color-accent) 20%, transparent); }

/* App bg wrappers */
.bg-app{ background-color: var(--color-bg-light); }
.dark .bg-app{ background-color: var(--color-bg-dark); }

/* Inputs */
.input-surface{ background-color: var(--color-input-light); color: var(--color-text-primary); }
.dark .input-surface{ background-color: var(--color-input-dark); color: var(--color-text-primary); }

/* Status / feedback */
.text-danger{ color: var(--color-danger); }
.text-danger-light{ color: var(--color-danger-light); }
.bg-success{ background-color: var(--color-success); }
.bg-success-light{ background-color: color-mix(in srgb, var(--color-success) 82%, white); }

/* Force card bg for .bg-white (used by some cards) */
.bg-white{ background-color: var(--color-card) !important; }
.dark .bg-white{ background-color: var(--color-card) !important; }

/* Placeholder */
::placeholder{ color: var(--color-placeholder-light); }
.dark ::placeholder{ color: var(--color-placeholder-dark); }

/* ====================== Buttons ====================== */
.btn-primary{
  background: var(--color-button-bg);
  color: var(--color-button-text);
  font-weight:600;
  padding:.5rem 1.25rem;
  border-radius:.5rem;
  box-shadow:0 2px 8px 0 rgba(33,33,33,.12);
  transition: background .2s, color .2s;
}
.btn-primary:hover{ background: var(--color-button-hover); }

.button-hoverable:hover{ background-color: var(--color-button-hover); }

/* ====================== Forms (Passwordless) ====================== */
.passwordless-form input,
.passwordless-form input[type="email"],
.passwordless-form input[type="text"],
.passwordless-form input[type="password"],
.passwordless-form input[type="number"],
.passwordless-form input[type="tel"],
.passwordless-form textarea,
.passwordless-form select{
  background: var(--color-input-light) !important;
  color: var(--color-text-primary) !important;
  border-radius:.5rem !important;
  border:1px solid var(--color-border) !important;
  font-family:inherit !important;
  font-size:1rem !important;
  transition: background .3s, color .3s, border-color .3s;
}
.dark .passwordless-form input,
.dark .passwordless-form input[type="email"],
.dark .passwordless-form input[type="text"],
.dark .passwordless-form input[type="password"],
.dark .passwordless-form input[type="number"],
.dark .passwordless-form input[type="tel"],
.dark .passwordless-form textarea,
.dark .passwordless-form select{
  background: var(--color-input-dark) !important;
  color: var(--color-text-primary) !important;
  border:1px solid var(--color-border) !important;
}

.passwordless-form button,
.passwordless-form input[type="submit"]{
  background: var(--color-button-bg) !important;   /* Neo-Lime */
  color: var(--color-button-text) !important;      /* Charcoal for CR ~13:1 */
  font-weight:600 !important;
  padding:.75rem 1.5rem !important;
  border-radius:.5rem !important;
  border:none !important;
  transition: background .2s, color .2s;
}
.passwordless-form button:hover,
.passwordless-form button:focus,
.passwordless-form input[type="submit"]:hover,
.passwordless-form input[type="submit"]:focus{
  background: var(--color-button-hover) !important;
  color: var(--color-button-text) !important;
}

.passwordless-form label,
.passwordless-label{
  color: var(--color-text-primary) !important;
  font-weight:500 !important;
  font-size:.97rem !important;
  margin-bottom:.25rem !important;
  display:block !important;
  transition: color .3s;
}
.dark .passwordless-form label,
.dark .passwordless-label{ color: var(--color-text-primary) !important; }

.passwordless-form input::placeholder{
  color: var(--color-placeholder-light) !important; opacity:1 !important;
}
.dark .passwordless-form input::placeholder{ color: var(--color-placeholder-dark) !important; }

.passwordless-form input:-webkit-autofill,
.passwordless-form input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--color-input-light) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}
.dark .passwordless-form input:-webkit-autofill,
.dark .passwordless-form input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--color-input-dark) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}

.passwordless-form .passwordless-error,
.passwordless-form .error,
.passwordless-form .alert,
.passwordless-form [role="alert"]{
  background:#fef2f2 !important;
  color:var(--color-danger) !important;
  border-radius:.5rem !important;
  padding:.5rem 1rem !important;
}
.dark .passwordless-form .passwordless-error,
.dark .passwordless-form .error,
.dark .passwordless-form .alert,
.dark .passwordless-form [role="alert"]{
  background:#7f1d1d1a !important;
  color:var(--color-danger-light) !important;
}

/* ====================== Content helpers ====================== */
.clamp-2-lines{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.clamp-3-lines{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.clamp-4-lines{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }

/* Chat */
.chat-container{ display:flex; flex-direction:column; gap:1rem; }
.chat-message-student{
  align-self:flex-start; background:#e8eaff; color:#2A296C;
  padding:.75rem; border-radius:.5rem; max-width:75%;
}
.chat-message-teacher{
  align-self:flex-end; background:#E9FFE0; color:#20420F;
  padding:.75rem; border-radius:.5rem; max-width:75%;
}
.chat-timestamp{ font-size:.75rem; color:#6b7280; }

/* Tooltip (3rd-party baseline) */
.react-tooltip{
  background:#1f2937; color:#f3f4f6; font-size:.75rem;
  border-radius:.375rem; padding:.5rem;
  box-shadow:0 2px 8px 0 rgba(31,41,55,.25); z-index:50;
}

/* Scrollbar */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-thumb{ background:var(--brand-indigo); border-radius:10px; }
::-webkit-scrollbar-track{ background:var(--color-bg-light); }
.dark ::-webkit-scrollbar-track{ background:var(--color-card); }

/* Spinner */
.spinner{ display:flex; justify-content:center; align-items:center; position:fixed; inset:0; z-index:10; }
.dot1,.dot2,.dot3{ width:.75rem; height:.75rem; border-radius:9999px; margin:0 .25rem; animation:dotSequence 1.5s ease-in-out infinite; }
.dot1{ background:var(--color-danger); }
.dot2{ background:var(--brand-indigo); width:1.5rem; height:1.5rem; position:relative; }
.dot2::before{ position:absolute; color:#fff; font-size:.875rem; top:50%; left:50%; transform:translate(-50%,-50%); content:"★"; }
.dot3{ background:var(--color-success); }

/* Animations */
@keyframes fadeIn{ 0%{opacity:.01} 100%{opacity:1} }
@keyframes slideUp{ 0%{transform:translateY(10px); opacity:.01} 100%{transform:translateY(0); opacity:1} }
@keyframes dotSequence{ 0%,100%{ transform:scale(.5) } 50%{ transform:scale(1) } }
.animate-fade-in{ animation:fadeIn .3s ease-out; }
.animate-slide-up{ animation:slideUp .3s ease-out; }
.delay-100{ animation-delay:.1s; }

/* Hero (generic) */
.heroContainer{ position:relative; height:100vh; width:100%; margin-top:4rem; overflow:hidden; }
.heroImageWrapper,.heroCrop,.heroImage{ width:100%; height:100%; }
.heroImage{ object-fit:cover; }
.HeroOverlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:1; }
.heroContent{
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; height:100%; text-align:center;
  color:#fff; padding:1rem;
}
.heroTitle{ font-size:1.875rem; font-weight:bold; margin-bottom:1rem; }
@media (min-width:768px){ .heroTitle{ font-size:3rem; } .heroSubtitle{ font-size:1.5rem; } }
@media (min-width:1024px){ .heroTitle{ font-size:3.75rem; } }
.heroSubtitle{ font-size:1.25rem; margin-bottom:1rem; }
.heroDescription{ max-width:40rem; font-size:1.125rem; margin-bottom:2rem; }
.heroButtons{ display:flex; flex-direction:column; gap:1rem; }
@media (min-width:640px){ .heroButtons{ flex-direction:row; } }
.exploreButton,.contactButton{
  font-weight:600; padding:.75rem 1.5rem; border-radius:.5rem;
  box-shadow:0 2px 8px 0 rgba(33,33,33,.15);
  transition: background-color .3s, color .3s, border-color .3s;
}
.exploreButton{ background:var(--color-accent); color:var(--color-button-text); }
.exploreButton:hover{ background:var(--color-accent-dark); }
.contactButton{ background:var(--brand-white); color:var(--brand-indigo); border:1px solid currentColor; }
.contactButton:hover{ background:#f3f4f6; }

/* Print */
@media print{
  body *{ visibility:hidden; }
  div[ref="componentRef"], div[ref="componentRef"] *{ visibility:visible; }
  div[ref="componentRef"]{ position:absolute; left:0; top:0; width:100%; }
}

/* ====================== Extra utilities via Tailwind layer ====================== */
@layer utilities{
  .perspective-1000{ perspective:1000px; }
  .transform-style-preserve-3d{ transform-style:preserve-3d; }
  .cube-size{ width:var(--cube); height:var(--cube); }
  .will-change-transform{ will-change:transform; }
  .backface-hidden{ backface-visibility:hidden; }

  .face-front{  transform:rotateY(0) translateZ(calc(var(--cube)/2)); }
  .face-back{   transform:rotateY(180deg) translateZ(calc(var(--cube)/2)); }
  .face-right{  transform:rotateY(90deg) translateZ(calc(var(--cube)/2)); }
  .face-left{   transform:rotateY(-90deg) translateZ(calc(var(--cube)/2)); }
  .face-top{    transform:rotateX(90deg) translateZ(calc(var(--cube)/2)); }
  .face-bottom{ transform:rotateX(-90deg) translateZ(calc(var(--cube)/2)); }

  @keyframes spin-slow-xy{ 0%{ transform:rotateX(0) rotateY(0) } 100%{ transform:rotateX(360deg) rotateY(360deg) } }
  .animate-spin-slow{ animation:spin-slow-xy 12s linear infinite; }
  @media (prefers-reduced-motion:reduce){ .animate-spin-slow{ animation:none !important; } }
}

.bg-blomiva-glyph {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='14' fill='%230f172a'/><g fill='%2322d3ee'><rect x='18' y='14' width='10' height='36' rx='5'/><rect x='26' y='14' width='20' height='16' rx='8'/><rect x='26' y='34' width='20' height='16' rx='8'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}