:root {

  --navy: #182433;

  --navy-light: #243447;

  --orange: #f59e0b;

  --orange-dark: #d97706;

  --orange-light: #fff7ed;

  --blue: #2563eb;

  --blue-dark: #1d4ed8;

  --green: #16a34a;

  --green-dark: #15803d;

  --red: #dc2626;

  --red-dark: #b91c1c;

  --red-light: #fee2e2;

  --background: #edf2f6;

  --background-dark: #e2e8ef;

  --card: #ffffff;

  --surface-soft: #f8fafc;

  --surface-warm: #fffaf2;

  --text: #1f2937;

  --muted: #6b7280;

  --light-muted: #9ca3af;

  --border: #e2e8f0;

  --border-dark: #cbd5e1;

  --shadow-small:
    0 2px 8px rgba(15, 23, 42, 0.05);

  --shadow-medium:
    0 7px 22px rgba(15, 23, 42, 0.08);

  --shadow-large:
    0 15px 38px rgba(15, 23, 42, 0.11);

  --radius-small: 8px;

  --radius: 12px;

  --radius-large: 16px;
}


html {

  min-height: 100%;

  background-color: var(--background);
}


body {

  min-height: 100vh;

  min-height: 100dvh;

  display: flex;

  flex-direction: column;

  background-color: var(--background);

  color: var(--text);

  font-family:

    Inter,

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    Roboto,

    Helvetica,

    Arial,

    sans-serif;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;
}


.section {

  flex: 1 0 auto;

  min-height: 0;

  padding-top: 38px;

  padding-bottom: 64px;

  background:

    linear-gradient(

      180deg,

      #e6edf3 0%,

      #edf2f6 280px,

      var(--background) 100%

    );
}


.title {

  color: var(--navy);

  letter-spacing: -0.025em;

  line-height: 1.15;
}


.subtitle {

  color: var(--muted);

  line-height: 1.5;
}


p {

  line-height: 1.55;
}


a {

  transition:

    color 0.2s ease,

    background-color 0.2s ease,

    border-color 0.2s ease,

    box-shadow 0.2s ease,

    transform 0.2s ease;
}


a:focus-visible,

button:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible {

  outline:

    3px solid rgba(245, 158, 11, 0.25);

  outline-offset: 2px;
}


::selection {

  background-color: #fde68a;

  color: var(--navy);
}


/* =========================================

   GENERAL CARDS

========================================= */

.card {

  height: 100%;

  overflow: hidden;

  background-color: var(--card);

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

  border-radius: var(--radius);

  box-shadow: var(--shadow-small);

  transition:

    transform 0.2s ease,

    box-shadow 0.2s ease,

    border-color 0.2s ease;
}


.card:hover {

  transform: translateY(-2px);

  border-color: var(--border-dark);

  box-shadow: var(--shadow-medium);
}


.card-image .image {

  overflow: hidden;

  background-color: #e5e7eb;
}


.card-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}


.card .subtitle {

  color: var(--orange-dark);

  font-weight: 800;
}


.notification {

  border-radius: var(--radius);

  box-shadow: var(--shadow-small);
}


hr {

  height: 1px;

  background-color: var(--border);

  border: none;

  margin: 24px 0;
}


@media screen and (max-width: 768px) {

  .section {

    padding:

      24px

      14px

      42px;
  }


  .title.is-2 {

    font-size: 1.8rem;
  }


  .title.is-3 {

    font-size: 1.5rem;
  }

}

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

img,
video,
canvas,
svg {
  max-width:
    100%;
}

img {
  height:
    auto;
}

.container,
.column,
.card,
.box,
.notification,
.table-container {
  min-width:
    0;
}

.table-container {
  max-width:
    100%;

  overflow-x:
    auto;

  -webkit-overflow-scrolling:
    touch;
}

input,
textarea,
select,
button,
.button {
  max-width:
    100%;
}

@media screen and (max-width: 768px) {

  html,
  body {
    max-width:
      100%;

    overflow-x:
      hidden;
  }

  .container {
    width:
      100%;

    max-width:
      100%;
  }

  .columns {
    margin-left:
      0;

    margin-right:
      0;
  }

  .columns > .column {
    padding-left:
      0.5rem;

    padding-right:
      0.5rem;
  }

  .button,
  button,
  input,
  textarea,
  select {
    touch-action:
      manipulation;
  }

  input,
  textarea,
  select {
    font-size:
      16px;
  }
}