/* ===========================
   THEME TOKENS (light base)
   =========================== */
:root {
  /* Layout & text */
  --bg:              255 255 255;   /* body background */
  --surface:         248 250 252;   /* card, header, chip bg (slate-50) */
  --surface-hover:   255 255 255;   /* hover pe chipuri etc. */
  --text:            15 23 42;      /* slate-900 */
  --muted:           100 116 139;   /* slate-500 */

  /* Accent defaults (vor fi suprascrise de .theme-*) */
  --accent-500: 249 115 22;  /* orange-500 */
  --accent-600: 234 88 12;   /* orange-600 */
  --accent-700: 194 65 12;   /* orange-700 */
  --on-accent:  255 255 255; /* text pe buton/pilă activă */

  /* Butoane (derivate) */
  --btn-primary-bg:   var(--accent-600);
  --btn-primary-hover:var(--accent-700);
  --btn-primary-text: var(--on-accent);
  --btn-primary-ring: var(--accent-600);
 
/* Input tokens */
  --input-bg:      255 255 255;      /* de obicei alb sau var(--surface) */
  --input-text:    var(--text);
  --input-border:  0 0 0;            /* folosit cu opacitate mică */
  --input-radius:  0.75rem;
  --ring-color:    var(--btn-primary-ring); /* alias pt focus ring */
  --danger:        220 38 38;        /* red-600 (pt erori) */
  --success:       5 150 105;        /* emerald-600 (pt succes) */
}
:root,
[class^="theme-"], [class*=" theme-"] {
  --accent: var(--accent-600);
  --accent-contrast: var(--on-accent);
}
/* Utilitare minime (poți folosi direct în Blade) */
.bg-bg            { background-color: rgb(var(--bg)); }
.bg-surface       { background-color: rgb(var(--surface)); }
.text-text        { color:            rgb(var(--text)); }
.text-muted       { color:            rgb(var(--muted)); }

/* Buton accent (opțional, dacă vrei o clasă dedicată) */
.btn-accent {
  background-color: rgb(var(--btn-primary-bg));
  color:            rgb(var(--btn-primary-text));
  transition: background-color .2s ease;
}
.btn-accent:hover { background-color: rgb(var(--btn-primary-hover)); }
/* Ring accent (folosește Tailwind ring, dar putem seta culoarea din CSS var) */
.ring-accent { --tw-ring-color: rgb(var(--btn-primary-ring)); }

/* ===========================
   THEMES (Tailwind colors)
   Setăm 500/600/700 pentru accent.
   =========================== */

/* Neutre / griuri */
.theme-slate   { --accent-500: 100 116 139; --accent-600: 71 85 105;  --accent-700: 51 65 85;  --on-accent: 255 255 255; }
.theme-gray    { --accent-500: 107 114 128; --accent-600: 75 85 99;   --accent-700: 55 65 81;  --on-accent: 255 255 255; }
.theme-zinc    { --accent-500: 113 113 122; --accent-600: 82 82 91;   --accent-700: 63 63 70;  --on-accent: 255 255 255; }
.theme-neutral { --accent-500: 115 115 115; --accent-600: 82 82 82;   --accent-700: 64 64 64;  --on-accent: 255 255 255; }
.theme-stone   { --accent-500: 120 113 108; --accent-600: 87 83 78;   --accent-700: 68 64 60;  --on-accent: 255 255 255; }

/* Roșii / rozuri */
.theme-red     { --accent-500: 239 68 68;   --accent-600: 220 38 38;   --accent-700: 185 28 28; --on-accent: 255 255 255; }
.theme-rose    { --accent-500: 244 63 94;   --accent-600: 225 29 72;   --accent-700: 190 18 60; --on-accent: 255 255 255; }
.theme-pink    { --accent-500: 236 72 153;  --accent-600: 219 39 119;  --accent-700: 190 24 93; --on-accent: 255 255 255; }
.theme-fuchsia { --accent-500: 217 70 239;  --accent-600: 192 38 211;  --accent-700: 162 28 175;--on-accent: 255 255 255; }

/* Violeți / mov */
.theme-purple  { --accent-500: 168 85 247;  --accent-600: 147 51 234;  --accent-700: 126 34 206;--on-accent: 255 255 255; }
.theme-violet  { --accent-500: 139 92 246;  --accent-600: 124 58 237;  --accent-700: 109 40 217;--on-accent: 255 255 255; }
.theme-indigo  { --accent-500: 99 102 241;  --accent-600: 79 70 229;   --accent-700: 67 56 202; --on-accent: 255 255 255; }

/* Albastru / cyan */
.theme-blue    { --accent-500: 59 130 246;  --accent-600: 37 99 235;   --accent-700: 29 78 216; --on-accent: 255 255 255; }
.theme-sky     { --accent-500: 14 165 233;  --accent-600: 2 132 199;   --accent-700: 3 105 161; --on-accent: 255 255 255; }
.theme-cyan    { --accent-500: 6 182 212;   --accent-600: 8 145 178;   --accent-700: 14 116 144;--on-accent: 255 255 255; }

/* Verde / teal / lime */
.theme-teal    { --accent-500: 20 184 166;  --accent-600: 13 148 136;  --accent-700: 15 118 110;--on-accent: 255 255 255; }
.theme-emerald { --accent-500: 16 185 129;  --accent-600: 5 150 105;   --accent-700: 4 120 87;  --on-accent: 255 255 255; }
.theme-green   { --accent-500: 34 197 94;   --accent-600: 22 163 74;   --accent-700: 21 128 61; --on-accent: 255 255 255; }
.theme-lime    { --accent-500: 132 204 22;  --accent-600: 101 163 13;  --accent-700: 77 124 15; --on-accent: 0 0 0;   }

/* Galbene / portocalii */
.theme-yellow  { --accent-500: 234 179 8;   --accent-600: 202 138 4;    --accent-700: 161 98 7;  --on-accent: 0 0 0;    }
.theme-amber   { --accent-500: 245 158 11;  --accent-600: 217 119 6;    --accent-700: 180 83 9;  --on-accent: 0 0 0;    }
.theme-orange  { --accent-500: 249 115 22;  --accent-600: 234 88 12;    --accent-700: 194 65 12; --on-accent: 255 255 255; }

/* ===========================
   Themed <input> helpers
   =========================== */
.input {
  width: 100%;
  background-color: rgb(var(--input-bg));
  color: rgb(var(--input-text));
  border: 1px solid rgb(var(--input-border) / .12);
  border-radius: var(--input-radius);
  padding: .5rem .75rem; /* 8px 12px */
  line-height: 1.5;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}

.input::placeholder {
  color: rgb(var(--muted) / .7);
}

.input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgb(var(--ring-color) / .35);
}

/* State: disabled & readonly */
.input:disabled,
.input[readonly] {
  opacity: .7;
  cursor: not-allowed;
}

/* State: error (folosește una din clasele de mai jos) */
.input.input-error,
.input[aria-invalid="true"] {
  border-color: rgb(var(--danger));
  box-shadow: 0 0 0 3px rgb(var(--danger) / .25);
}

/* State: success (opțional) */
.input.input-success,
.input[aria-valid="true"] {
  border-color: rgb(var(--success));
  box-shadow: 0 0 0 3px rgb(var(--success) / .22);
}

/* Variante vizuale */
.input--solid { background-color: rgb(var(--surface)); border-color: rgb(var(--input-border) / .08); }
.input--underline {
  border: 0; border-bottom: 1px solid rgb(var(--input-border) / .16); border-radius: 0;
  padding-left: 0; padding-right: 0;
}
.input--underline:focus { box-shadow: 0 2px 0 0 rgb(var(--ring-color) / .45); }

/* Dimensiuni */
.input-sm { padding: .375rem .625rem; font-size: .875rem; }
.input-lg { padding: .75rem 1rem;    font-size: 1rem;   }

/* Grup cu prefix/sufix (ex: +40 | [input] | icon) */
.input-group {
  display: flex; align-items: stretch;
  border: 1px solid rgb(var(--input-border) / .12);
  border-radius: var(--input-radius);
  background-color: rgb(var(--input-bg));
}
.input-group:focus-within { box-shadow: 0 0 0 3px rgb(var(--ring-color) / .35); border-color: transparent; }
.input-group > .addon {
  display: inline-flex; align-items: center; padding: 0 .625rem;
  color: rgb(var(--muted)); white-space: nowrap;
  border-right: 1px solid rgb(var(--input-border) / .12);
  background-color: rgb(var(--surface));
}
.input-group > .input {
  border: 0; border-radius: 0; background: transparent;
}
.input-group > .addon:last-child { border-right: 0; border-left: 1px solid rgb(var(--input-border) / .12); }

/* Derivă butoanele din accent pentru fiecare temă */
[class^="theme-"], [class*=" theme-"] {
  --btn-primary-bg:    var(--accent-600);
  --btn-primary-hover: var(--accent-700);
  --btn-primary-text:  var(--on-accent);
  --btn-primary-ring:  var(--accent-600);
}
:root,
[class^="theme-"], [class*=" theme-"] {
  --accent: var(--accent-600);
  --accent-contrast: var(--on-accent);
}