/* ============================================================
   JuliAnn.co
   Login
   ============================================================ */


/* ============================================================
   COLOR PALETTE / VARIABLES
   ============================================================ */

:root {
  --sage: #b5ca8d;
  --leaf: #8bb174;
  --teal: #426b69;
  --navy: #222e50;
  --deep-teal: #2a4849;

  --gold: #d9b85f;
  --gold-soft: #edd99b;

  --cream: #f7f8f2;
  --paper: #ffffff;

  --muted: #667472;

  --line: rgba(66, 107, 105, 0.20);

  --shadow:
    0 16px 40px rgba(34, 46, 80, 0.12);

  --radius: 20px;
}


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

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;

  min-height: 100vh;

  background:
    linear-gradient(
      180deg,
      rgba(181, 202, 141, 0.22) 0%,
      rgba(139, 177, 116, 0.10) 28%,
      var(--cream) 100%
    );

  color: var(--navy);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   LOGIN SHELL
   ============================================================ */

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

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    28px
    16px;
}


/* ============================================================
   LOGIN CARD
   ============================================================ */

.login-card {
  width: min(
    100%,
    460px
  );

  background: var(--paper);

  border:
    1px solid var(--line);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);

  overflow: hidden;
}


/* ============================================================
   HEADER
   ============================================================ */

.login-header {
  background:
    linear-gradient(
      145deg,
      var(--navy),
      var(--deep-teal)
    );

  color: #ffffff;

  border-top:
    5px solid var(--gold);

  padding:
    30px
    26px
    26px;
}


.eyebrow {
  color:
    var(--gold-soft);

  text-transform:
    uppercase;

  letter-spacing:
    0.16em;

  font-size:
    0.72rem;

  font-weight:
    800;

  margin-bottom:
    7px;
}


h1,
h2 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  margin:
    0;

  line-height:
    1.15;
}


h1 {
  color:
    var(--gold-soft);

  font-size:
    clamp(
      2rem,
      8vw,
      2.8rem
    );
}


.login-header p {
  margin:
    10px
    0
    0;

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

  font-size:
    0.94rem;
}


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

#login-form {
  padding:
    26px;
}


.field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  margin-bottom:
    18px;
}


label {
  color:
    var(--deep-teal);

  font-weight:
    700;

  font-size:
    0.91rem;
}


/* ============================================================
   INPUTS
   ============================================================ */

input {
  width:
    100%;

  min-height:
    48px;

  border:
    1px solid
    rgba(
      66,
      107,
      105,
      0.32
    );

  border-radius:
    11px;

  background:
    #ffffff;

  color:
    var(--navy);

  font:
    inherit;

  padding:
    10px
    12px;

  outline:
    none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}


input:focus {
  border-color:
    var(--teal);

  box-shadow:
    0 0 0 3px
    rgba(
      139,
      177,
      116,
      0.20
    );
}


/* ============================================================
   PASSWORD
   ============================================================ */

.password-wrap {
  position:
    relative;
}


.password-wrap input {
  padding-right:
    72px;
}


.toggle-password {
  position:
    absolute;

  right:
    7px;

  top:
    8px;

  height:
    32px;

  border:
    0;

  border-radius:
    8px;

  background:
    rgba(
      181,
      202,
      141,
      0.22
    );

  color:
    var(--deep-teal);

  font-weight:
    700;

  cursor:
    pointer;

  padding:
    0
    10px;
}


.toggle-password:hover {
  background:
    rgba(
      181,
      202,
      141,
      0.38
    );
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  min-height:
    48px;

  border:
    0;

  border-radius:
    11px;

  font:
    inherit;

  font-weight:
    800;

  text-decoration:
    none;

  cursor:
    pointer;

  padding:
    11px
    18px;

  transition:
    background-color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}


.btn:active {
  transform:
    translateY(1px);
}


.btn:disabled {
  opacity:
    0.65;

  cursor:
    wait;
}


.btn-primary {
  background:
    var(--deep-teal);

  color:
    #ffffff;

  box-shadow:
    0 6px 16px
    rgba(
      42,
      72,
      73,
      0.18
    );
}


.btn-primary:hover {
  background:
    var(--teal);
}


/* ============================================================
   MESSAGES
   ============================================================ */

.form-message {
  display:
    none;

  margin:
    0
    0
    18px;

  padding:
    12px
    14px;

  border-radius:
    11px;

  font-size:
    0.90rem;
}


.form-message.error {
  display:
    block;

  background:
    #fff2ee;

  border:
    1px solid #e5b1a1;

  color:
    #7b3827;
}


.form-message.success {
  display:
    block;

  background:
    rgba(
      181,
      202,
      141,
      0.20
    );

  border:
    1px solid var(--leaf);

  color:
    var(--deep-teal);
}


/* ============================================================
   ALREADY LOGGED IN
   ============================================================ */

.already-logged-in {
  padding:
    26px;
}


.already-logged-in h2 {
  color:
    var(--deep-teal);

  font-size:
    1.45rem;

  margin-bottom:
    8px;
}


.already-logged-in p {
  color:
    var(--muted);

  margin:
    0
    0
    20px;
}


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

@media (max-width: 430px) {

  .login-shell {
    align-items:
      flex-start;

    padding:
      20px
      11px;
  }


  .login-card {
    border-radius:
      16px;
  }


  .login-header {
    padding:
      24px
      20px
      22px;
  }


  #login-form,
  .already-logged-in {
    padding:
      20px;
  }

}