/* ===== auth.but-it.uz — vars.css (shared variables only) ===== */
:root {
  --or-50: #FFF7ED; --or-100: #FFEDD5; --or-200: #FED7AA;
  --or-400: #FB923C; --or-500: #F97316; --or-600: #EA6C0A;
  --or-700: #C2590A; --or-800: #9A3D06; --or-900: #7C2D12;
  --red-50:   #FCEBEB; --red-100: #F7C1C1; --red-600: #A32D2D;
  --green-50: #EAF3DE; --green-100:#C0DD97; --green-600:#3B6D11; --green-800:#27500A;
  --blue-50:  #E6F1FB; --blue-100: #B5D4F4; --blue-600: #185FA5; --blue-800: #0C447C;
  --amber-50: #FAEEDA; --amber-100:#FAC775; --amber-600:#854F0B; --amber-800:#633806;
  --radius: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition: .15s ease;
}

:root, [data-theme="light"] {
  --accent: #F97316; --accent-hover: #EA6C0A;
  --accent-light: #FFF7ED; --accent-border: #FED7AA;
  --bg: #F6F5F3; --surface: #FFFFFF; --surface-2: #F9F8F6;
  --border: #E8E6E1; --border-2: #D4D2CB;
  --text: #1C1917; --text-2: #57534E; --text-3: #A8A29E;
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
}

[data-theme="dark"] {
  --accent: #FB923C; --accent-hover: #F97316;
  --accent-light: #431407; --accent-border: #7C2D12;
  --bg: #111110; --surface: #1C1B1A; --surface-2: #252423;
  --border: #2E2C2A; --border-2: #3D3B38;
  --text: #E8E5E1; --text-2: #A8A29E; --text-3: #57534E;
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --red-50:   #2A0A0A; --red-100: #5C1A1A; --red-600: #F87171;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.6; transition: background .25s, color .25s;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font); cursor: pointer; }
input, select, textarea { font-family: var(--font); }

.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 5px; font-weight: 500; }
.form-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border-2);
  border-radius: var(--radius); background: var(--surface); color: var(--text);
  font-size: 13px; outline: none; transition: border-color var(--transition);
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.form-input::placeholder { color: var(--text-3); }
.hidden { display: none !important; }