/* ==========================================================================
   1. Global page defaults
   ========================================================================== */

/* 
  :root targets the top-level HTML element.
  This is a good place for site-wide defaults like font, text color, and background.
*/
:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: #172033;
  background: #f5f7fb;
}

/* 
  Makes sizing easier to reason about.
  With border-box, padding and borders are included in an element's width/height.
*/
* {
  box-sizing: border-box;
}

/*
  The body fills the screen and centers the main card.
*/
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

/* ==========================================================================
   2. Main landing card
   ========================================================================== */

/*
  The main white card in the center of the page.
*/
main {
  width: min(100%, 760px);
  padding: 4rem 2rem;

  text-align: center;

  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;

  box-shadow:
    0 24px 80px rgba(31, 41, 55, 0.12),
    0 1px 2px rgba(31, 41, 55, 0.08);
}

/* ==========================================================================
   3. Status badge / eyebrow
   ========================================================================== */

/*
  The small "Live on OCI" pill above the headline.
*/
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  margin-bottom: 1.25rem;
  padding: 0.45rem 0.8rem;

  border-radius: 999px;

  background: #eef4ff;
  color: #315aa8;

  font-size: 0.9rem;
  font-weight: 600;
}

/*
  The green status dot inside the eyebrow pill.
*/
.dot {
  width: 0.55rem;
  height: 0.55rem;

  border-radius: 999px;

  background: #39b56a;
  box-shadow: 0 0 0 6px rgba(57, 181, 106, 0.15);
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

/*
  Main page headline.
  clamp() makes the text responsive:
  - minimum: 2.4rem
  - preferred: 6vw
  - maximum: 4.75rem
*/
h1 {
  margin: 0;

  font-size: clamp(2.4rem, 6vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

/*
  Default paragraph styling.
*/
p {
  max-width: 560px;
  margin: 1.5rem auto 0;

  color: #5b6475;

  font-size: 1.1rem;
  line-height: 1.7;
}

/* ==========================================================================
   5. Action area
   ========================================================================== */

/*
  Wrapper around buttons / clicked state.
*/
.actions {
  margin-top: 2.25rem;

  display: flex;
  justify-content: center;
}

/*
  Shared visual base for buttons and message pills.
  This keeps both elements feeling like part of the same design system.
*/
button,
.button-link,
.clicked-message {
  border: 0;
  border-radius: 16px;
  padding: 0.95rem 1.35rem;

  font: inherit;
  font-size: 1rem;
  font-weight: 700;
}

/* ==========================================================================
   6. Buttons and links
   ========================================================================== */

/*
  Real button elements, like the HTMX "Click Me" button.
*/
button {
  appearance: none;
  cursor: pointer;

  color: white;
  background: #172033;

  box-shadow: 0 12px 24px rgba(23, 32, 51, 0.22);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

/*
  Anchor tag styled to look like a button.
  Used for the "Go Back" link.
*/
.button-link {
  display: inline-block;
  text-decoration: none;

  color: white;
  background: #172033;

  box-shadow: 0 12px 24px rgba(23, 32, 51, 0.22);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

/*
  Hover state for buttons and button-looking links.
*/
button:hover,
.button-link:hover {
  transform: translateY(-2px);

  background: #26334f;
  box-shadow: 0 16px 32px rgba(23, 32, 51, 0.28);
}

/*
  Pressed/clicked state.
*/
button:active,
.button-link:active {
  transform: translateY(0);
}

/*
  HTMX automatically adds this class while a request is in progress.
*/
button.htmx-request {
  opacity: 0.7;
  cursor: wait;
}

/* ==========================================================================
   7. Clicked state
   ========================================================================== */

/*
  Parent wrapper for the clicked message and go-back link.
  This stacks them vertically.
*/
.clicked-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/*
  Success message shown after the HTMX click.
*/
.clicked-message {
  display: inline-block;

  color: #1f7a45;
  background: #eaf8ef;
}

/*
  Only needed if your clicked message contains a <p>.
  Paragraphs have default margins, so this removes extra spacing inside the pill.
*/
.clicked-message p {
  margin: 0;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

footer {
  margin-top: 2rem;

  color: #8a93a5;

  font-size: 0.9rem;
}