/* Transparency Dental Clinics — website / login pages */
@font-face { font-family: "Marcellus"; src: url("/assets/tclinics/fonts/Marcellus-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/tclinics/fonts/Montserrat-Variable.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
/* U+20C1 SAUDI RIYAL SIGN, which most fonts do not draw yet (font-src/build_riyal_font.py). Listed first in every
   stack; unicode-range keeps it to that one character, so everything else still comes from the brand fonts. */
@font-face { font-family: "Saudi Riyal"; src: url("/assets/tclinics/fonts/SaudiRiyal.woff2") format("woff2"), url("/assets/tclinics/fonts/SaudiRiyal.ttf") format("truetype"); unicode-range: U+20C1; font-display: block; }
:root { --tc-gold: #CCB17A; --tc-gold-deep: #C4A466; --tc-gold-ink: #7D6430; --tc-green: #283725; --tc-olive: #3E432D; --tc-ivory: #F6F5E8; --tc-cream: #FFE8CF;
  --primary: var(--tc-green); --primary-color: var(--tc-green); --btn-primary: var(--tc-green); --bg-color: var(--tc-ivory); --font-stack: "Saudi Riyal", "Montserrat", "Segoe UI", Arial, sans-serif; }
body { font-family: var(--font-stack); background: var(--tc-ivory); color: var(--tc-green); }
h1, h2, h3, .page-card-head h4, .for-login .page-card-head, .for-signup .page-card-head, .for-forgot .page-card-head { font-family: "Saudi Riyal", "Marcellus", Georgia, serif; font-weight: 400; }
.for-login, .for-signup, .for-forgot, .for-email-login, .for-login-with-email-link { background: var(--tc-ivory); }
.page-card { border: 1px solid #e3dfd2; border-top: 3px solid var(--tc-gold); border-radius: 10px; box-shadow: 0 18px 50px rgba(40,55,37,.08); background: #fff; }
.page-card .page-card-head img, .page-card-head .app-logo, .splash-image, .for-login img { max-height: 110px; width: auto; }
.btn-primary, .btn-login { background: var(--tc-green) !important; border-color: var(--tc-green) !important; color: #fff !important; letter-spacing: .04em; }
.btn-primary:hover, .btn-login:hover { background: var(--tc-olive) !important; border-color: var(--tc-olive) !important; }
.form-control:focus { border-color: var(--tc-gold); box-shadow: 0 0 0 2px rgba(204,177,122,.35); }
/* gold-ink (not gold-deep, 2.2:1) so links pass WCAG AA on ivory and white */
a { color: var(--tc-gold-ink); } a:hover { color: var(--tc-green); }
.web-footer, footer { background: var(--tc-green); color: #e8e2d2; }
.navbar-light, .navbar { background: #fff !important; border-bottom: 2px solid var(--tc-gold); }
.navbar .navbar-brand img { max-height: 36px; }