:root {
  --tonz-green: #17382f;
  --tonz-green-dark: #0d2821;
  --tonz-green-deep: #071b16;

  --black: #0b0d0c;
  --white: #ffffff;

  --off-white: #f4f5f2;
  --gray: #747a76;
}


/* =====================================================
   BASE
   ===================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    var(--black);

  color:
    var(--white);
}


/* =====================================================
   LOGIN LAYOUT
   ===================================================== */

.login-page {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    minmax(380px, 0.8fr)
    1.2fr;
}


/* =====================================================
   LEFT LOGIN PANEL
   ===================================================== */

.login-panel {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    70px
    clamp(40px, 6vw, 90px);

  background:
    var(--black);
}


.back-link {
  position: absolute;

  top: 32px;
  left: 40px;

  color:
    rgba(255, 255, 255, 0.62);

  text-decoration: none;

  font-size: 0.88rem;
}


.back-link:hover {
  color:
    var(--white);
}


/* =====================================================
   BRAND
   ===================================================== */

.login-brand {
  margin-bottom:
    60px;
}


.brand-main {
  font-size:
    2rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.brand-sub {
  color:
    var(--tonz-green);

  text-transform:
    uppercase;

  letter-spacing:
    0.22em;

  font-size:
    0.72rem;

  font-weight:
    700;
}


.eyebrow {
  margin-bottom:
    12px;

  color:
    #7ca091;

  text-transform:
    uppercase;

  letter-spacing:
    0.2em;

  font-size:
    0.72rem;

  font-weight:
    800;
}


.login-panel h1 {
  margin:
    0 0 18px;

  font-size:
    clamp(
      3rem,
      6vw,
      5.4rem
    );

  line-height:
    0.95;

  text-transform:
    uppercase;
}


.login-copy {
  max-width:
    540px;

  margin-bottom:
    38px;

  color:
    rgba(
      255,
      255,
      255,
      0.66
    );

  font-size:
    1rem;
}


/* =====================================================
   FORM
   ===================================================== */

.login-form {
  max-width:
    500px;

  display: flex;

  flex-direction:
    column;

  gap:
    12px;
}


.login-form label {
  margin-top:
    10px;

  font-size:
    0.82rem;

  font-weight:
    700;
}


.login-form input {
  width:
    100%;

  padding:
    16px 17px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );

  border-radius:
    5px;

  background:
    #151816;

  color:
    var(--white);

  font-size:
    1rem;

  outline:
    none;
}


.login-form input:focus {
  border-color:
    var(--tonz-green);
}


.login-button {
  margin-top:
    18px;

  padding:
    17px 20px;

  border:
    none;

  border-radius:
    5px;

  background:
    var(--tonz-green);

  color:
    var(--white);

  font-size:
    0.92rem;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;

  cursor:
    pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.login-button:hover {
  transform:
    translateY(-2px);

  background:
    #214b3f;
}


.login-note {
  margin-top:
    20px;

  color:
    rgba(
      255,
      255,
      255,
      0.38
    );

  font-size:
    0.78rem;
}


/* =====================================================
   RIGHT VISUAL PANEL
   ===================================================== */

.login-visual {
  position:
    relative;

  min-height:
    100vh;

  background:
    linear-gradient(
      rgba(
        7,
        27,
        22,
        0.35
      ),
      rgba(
        7,
        27,
        22,
        0.78
      )
    ),
    linear-gradient(
      145deg,
      #244f43,
      #071b16
    );

  display:
    flex;

  align-items:
    flex-end;
}


.visual-overlay {
  padding:
    clamp(
      50px,
      7vw,
      100px
    );

  max-width:
    760px;
}


.visual-overlay h2 {
  margin:
    0 0 22px;

  font-size:
    clamp(
      3.2rem,
      6vw,
      6.5rem
    );

  line-height:
    0.9;

  text-transform:
    uppercase;
}


.visual-overlay p {
  max-width:
    580px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size:
    1.05rem;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (
  max-width: 900px
) {

  .login-page {
    grid-template-columns:
      1fr;
  }


  .login-visual {
    min-height:
      480px;
  }


  .login-panel {
    min-height:
      100vh;

    padding:
      100px 28px
      55px;
  }


  .back-link {
    left:
      28px;
  }

}