@font-face {
  font-family: Coolvetica-Condenced;
  src: url(/assets/fonts/67055b377bf93d91d276ad13_coolvetica\ condensed\ rg.otf);
}

@font-face {
  font-family: Satoshi;
  src: url(/assets/fonts/67055c2d430f5cb4e46d419e_Satoshi-Variable.ttf);
}

/* -- Typography component --------------------------------------- */

/* -- Base text ---------------------------------------------- */
/* Sets the default font size for the entire page.            */
/* All typography classes are sized relative to this baseline. */
@layer base {
  body {
    font-size: 0.875rem;
    line-height: 1.5;
    font-family: "Coolvetica-Condenced", sans-serif;
  }
}

@layer components {
  /* -- Headings ---------------------------------------------- */
  .h1 {
    font-size: 5rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 0.9;
    font-weight: 400;
    color: var(--foreground);
  }

  .h2 {
    scroll-margin-top: 5rem;
    text-wrap: balance;
    color: var(--foreground);
    text-transform: uppercase;
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: normal;

    &:first-child {
      margin-top: 0;
    }
  }

  .h3 {
    scroll-margin-top: 5rem;
    font-family: "Coolvetica-Condenced", sans-serif;
    text-wrap: balance;
    color: var(--background);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    font-size: 2.25rem;
  }

  .h4 {
    scroll-margin-top: 5rem;
    text-wrap: balance;
    color: var(--foreground);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: "Coolvetica-Condenced", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.04;
  }

  .h5 {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: "Coolvetica-Condenced", sans-serif;
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.4;
  }

  /* -- Paragraph --------------------------------------------- */
  .p {
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
    color: var(--foreground);
    font-family: "Satoshi", sans-serif;

    &:not(:first-child) {
      margin-top: 1.5rem;
    }
  }

  .medium {
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--foreground);
    font-family: "Satoshi", sans-serif;
  }

  .eyebrow {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--foreground);
    font-family: "Satoshi", sans-serif;
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-contrast: more) {
    .h1,
    .h2,
    .h3,
    .h4 {
      letter-spacing: 0;
    }
  }
}
/* -- Separator component ---------------------------------------- */

@layer components {
  .separator {
    border: none;
    margin: 0;
    flex-shrink: 0;
    background: var(--border);

    /* Horizontal (default) */
    height: 1px;
    width: 100%;

    /* Vertical */
    &[data-orientation="vertical"] {
      height: auto;
      width: 1px;
      align-self: stretch;
    }

    /* Decorative — hidden from assistive technology */
    &[aria-hidden="true"],
    &[role="none"] {
      /* No visual change — purely semantic */
    }
  }

  /* -- Accessibility ----------------------------------------- */
  @media (forced-colors: active) {
    .separator {
      background: CanvasText;
    }
  }

  @media (prefers-contrast: more) {
    .separator {
      background: var(--foreground);
      height: 2px;

      &[data-orientation="vertical"] {
        width: 2px;
        height: auto;
      }
    }
  }
}

/* -- Button --------------------------------------------- */

@layer components {
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 150ms ease;
    outline: none;
    flex-shrink: 0;
    height: 3.5rem;
    font-family: "Satoshi", sans-serif;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 999px;
    text-transform: uppercase;
    padding: 1rem 2rem;
    text-decoration: none;
    transition: background-color 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);

    & svg {
      pointer-events: none;
      flex-shrink: 0;

      &:not([class*="size-"]) {
        width: 1rem;
        height: 1rem;
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled,
    &[aria-disabled="true"] {
      pointer-events: none;
    }

    /* -- Variants -------------------------------------------- */
    &[data-variant="default"] {
      background-color: var(--green-accent);
      color: var(--foreground);
      &:hover {
        background-color: var(--green-accent-dark);
      }
    }

    &[data-variant="secondary"] {
      background-color: var(--background);
      color: var(--foreground);
      border: 1px solid var(--border);
      &:hover {
        background-color: var(--secondary-dark);
      }
    }

    &[data-variant="outline"] {
      background-color: var(--background);
      color: var(--foreground);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xs);

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    &[data-variant="ghost"] {
      background-color: transparent;
      color: var(--foreground);
      border-color: transparent;

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    &[data-variant="link"] {
      background-color: transparent;
      color: var(--foreground);
      height: auto;
      padding: 0;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-family: "Coolvetica-Condenced", sans-serif;
      font-size: 1.125rem;
      line-height: 1;
      &:hover {
        text-decoration: underline;
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="icon"] {
      height: 2.25rem;
      width: 2.25rem;
      padding: 0;
    }
    &[data-size="icon-lg"] {
      height: 2.75rem;
      width: 2.75rem;
      padding: 0;
    }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .btn {
      border: 2px solid transparent;

      &[data-variant="default"],
      &[data-variant="secondary"],
      &[data-variant="destructive"] {
        border-color: currentColor;
      }

      &[data-variant="outline"],
      &[data-variant="ghost"] {
        border-color: var(--foreground);
      }
    }
  }
}

/* -- Sheet component ------------------------------------------- */

@layer components {
  /* -- Base -------------------------------------------------- */
  dialog.sheet {
    border: none;
    border-radius: 0;
    background-color: var(--background);
    color: var(--foreground);
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease,
      display 300ms allow-discrete;

    &[open] {
      opacity: 1;
    }

    /* -- Side: left -------------------------------------------- */
    &[data-side="left"] {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: auto;
      width: 100%;
      max-width: 100vw;
      max-height: 100vh;
      height: 100%;
      border-left: none;
      border-right: 1px solid var(--border);
      transform: translateX(-100%);

      &[open] {
        transform: translateX(0);
      }
    }

    /* -- Backdrop ---------------------------------------------- */
    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition: all 300ms ease, display 300ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }
  }

  @starting-style {
    dialog.sheet[open],
    dialog.sheet[data-side="left"][open] {
      opacity: 0;
      transform: translateX(-100%);
    }

    dialog.sheet[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  /* -- Content sections -------------------------------------- */
  .sheet-content {
    padding: 50px 1.5rem 0;
    position: relative;
  }
  .sheet-header {
    margin-bottom: 1rem;
    padding-right: 2rem;
  }
  .sheet-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
    letter-spacing: -0.01em;
  }
  .sheet-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.6;
  }
  .sheet-body {
    margin-top: 1rem;
    font-size: 4rem;
  }
  .sheet-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  /* -- Close button ------------------------------------------ */
  .sheet-close-x {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: var(--foreground);
      background-color: var(--accent);
    }
  }
}

/* -- Image component ------------------------------------------- */
@layer components {
  .image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: 0;

    & > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* -- Fit variants ---------------------------------------- */
    &[data-fit="contain"] > img {
      object-fit: contain;
    }
    &[data-fit="fill"] > img {
      object-fit: fill;
    }
    &[data-fit="none"] > img {
      object-fit: none;
    }

    /* -- Aspect ratio ---------------------------------------- */
    &[data-ratio="1/1"] {
      aspect-ratio: 1 / 1;
    }
    &[data-ratio="4/3"] {
      aspect-ratio: 4 / 3;
    }
    &[data-ratio="3/2"] {
      aspect-ratio: 3 / 2;
    }
    &[data-ratio="16/9"] {
      aspect-ratio: 16 / 9;
    }
    &[data-ratio="21/9"] {
      aspect-ratio: 21 / 9;
    }
    &[data-ratio="3/4"] {
      aspect-ratio: 3 / 4;
    }

    /* -- Radius variants ------------------------------------- */
    &[data-radius="none"] {
      border-radius: 0;
    }
    &[data-radius="sm"] {
      border-radius: var(--radius-sm);
    }
    &[data-radius="md"] {
      border-radius: var(--radius-md);
    }
    &[data-radius="full"] {
      border-radius: 9999px;
    }

    /* -- Preview cursor -------------------------------------- */
    &[data-preview] {
      cursor: zoom-in;
    }

    /* -- Fallback -------------------------------------------- */
    & > .image-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--muted);
      color: var(--muted-foreground);

      & > svg {
        width: 2.5rem;
        height: 2.5rem;
        opacity: 0.5;
      }
    }

    /* Hide fallback when image loads successfully */
    &:has(> img:not([data-error])) > .image-fallback {
      display: none;
    }
  }

  /* -- Caption ----------------------------------------------- */
  .image-caption {
    padding: 0.625rem 0 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }

  @starting-style {
    dialog.image-lightbox[open] {
      opacity: 0;
    }

    dialog.image-lightbox[open]::backdrop {
      background: oklch(0 0 0 / 0);
    }
  }
}
/* -- Label component -------------------------------------------- */

@layer components {
  .label {
    font-size: 1.125rem;
    font-weight: 300;
    font-family: "Satoshi", sans-serif;
    line-height: 1;
    color: #a9a9a9;
    display: block;
    margin-bottom: 0.375rem !important;
    cursor: default;

    /* Disabled — explicit attribute */
    &[data-disabled] {
      opacity: 0.7;
      cursor: not-allowed;
    }

    /* Disabled — auto-detect via adjacent disabled control */
    &:has(+ :disabled),
    &:has(+ [data-disabled]) {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

  /* -- Hint text (optional, required indicators) ----------- */
  .label-hint {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-contrast: more) {
    .label[data-disabled],
    .label:has(+ :disabled),
    .label:has(+ [data-disabled]) {
      opacity: 0.85;
    }
  }

  @media (forced-colors: active) {
    .label {
      color: LinkText;
    }

    .label[data-disabled],
    .label:has(+ :disabled),
    .label:has(+ [data-disabled]) {
      opacity: 1;
      color: GrayText;
    }
  }
}

/* -- Input component ------------------------------------------- */

@layer components {
  .input {
    min-height: 3.5rem;
    height: auto;
    width: 100%;
    border: 1px solid #0808084d;
    border-radius: 2.5rem;
    background: var(--background);
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    font-family: "Satoshi", sans-serif;
    color: var(--foreground);
    outline: none;

    transition: border-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &:hover {
      border-color: var(--foreground);
    }

    &:focus {
      border-color: var(--foreground);
      background-color: #a9a9a91a;
    }

    &::placeholder {
      color: var(--muted-foreground);
      font-family: "Satoshi", sans-serif;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* -- Readonly state -------------------------------------- */
    &:read-only:not([type="file"]) {
      background: var(--muted);
      cursor: default;
      opacity: 0.7;

      &:focus {
        border-color: var(--input);
        box-shadow: var(--shadow-xs);
      }
    }

    /* -- Invalid state --------------------------------------- */
    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="sm"] {
      height: 2rem;
      padding: 0 0.625rem;
      font-size: 0.8125rem;
    }
    &[data-size="lg"] {
      height: 2.75rem;
      padding: 0 1rem;
      font-size: 1rem;
    }
  }

  /* -- Auto-growing textarea --------------------------------- */
  textarea.input {
    field-sizing: content;
    min-height: 5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* -- Field description ------------------------------------- */
  .field-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: 0.375rem 0 0;
  }

  /* -- Field error ------------------------------------------- */
  .field-error {
    font-size: 0.8125rem;
    color: var(--destructive);
    margin: 0.375rem 0 0;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .input {
      transition: none;
    }

    .input[type="file"]::file-selector-button {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .input {
      border-width: 2px;
    }

    .input:disabled {
      opacity: 0.7;
    }
  }

  @media (forced-colors: active) {
    .input {
      border-color: ButtonBorder;
      color: ButtonText;
      background: Field;
    }

    .input:focus {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }

    .input:disabled {
      opacity: 1;
      color: GrayText;
      border-color: GrayText;
    }

    .input:is([aria-invalid="true"], :user-invalid) {
      border-color: LinkText;
    }

    .field-error {
      color: LinkText;
    }
  }
}

/* -- Card component -------------------------------------------- */

@layer components {
  .card {
    background-color: var(--card);
    color: var(--card-foreground);
    overflow: hidden;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  .card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 1.5rem;
  }

  .card-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* -- Container query: compact card in narrow containers -- */
  @container (max-width: 280px) {
    .card-header {
      padding: 1rem;
      padding-bottom: 0;
    }
    .card-content {
      padding: 1rem;
    }
    .card-footer {
      padding: 1rem;
      padding-top: 0;
    }
    .card-title {
      font-size: 1rem;
    }
  }
}

@layer components {
  .accordion {
    display: flex;
    flex-direction: column;
  }

  .accordion-item {
    border-bottom: 1px solid var(--accordion-border);
    transition: border-color 200ms ease;

    &[open] {
      border-bottom-color: var(--green-accent);
    }
  }

  .accordion-item:last-child {
    border-bottom: none;
  }

  .accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Satoshi", sans-serif;
    font-size: 1.125rem;
    color: var(--lightgray);
    transition: color 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
    width: 100%;
    padding: 1rem 0;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    list-style: none;
  }

  .accordion-trigger::-webkit-details-marker {
    display: none;
  }

  .accordion-trigger::marker {
    content: "";
  }

  .accordion-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

  .accordion-chevron {
    flex-shrink: 0;
    transition: transform 250ms ease;
  }

  .accordion-item[open] > .accordion-trigger .accordion-chevron {
    transform: rotate(180deg);
  }

  .accordion-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, -8px, 0);
    transition: height 300ms ease, opacity 200ms ease, transform 300ms ease;
    padding-bottom: 1rem;
    font-size: 1.125rem;
    font-family: "Satoshi", sans-serif;
    color: var(--lightgray);
  }

  .accordion-item[open] .accordion-trigger {
    color: var(--green-accent);
  }

  .accordion-content.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion-content,
    .accordion-chevron {
      transition: none;
    }
  }
}

/* ---- Table ----------------------------------------------- */

@layer components {
  .table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid lightgray;
    border-radius: var(--radius-xl);
    container-type: inline-size;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.25rem;
    text-align: left;
    caption-side: bottom;
  }

  .table-head {
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: var(--muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);

    &:first-child {
      border-top-left-radius: var(--radius-lg);
    }

    &:last-child {
      border-top-right-radius: var(--radius-lg);
    }
  }

  .table-row {
    border-bottom: 1px solid var(--border);
    transition: background-color 150ms ease;

    &:last-child {
      border-bottom: none;
    }

    tbody &:hover {
      background-color: var(--muted);
    }
  }

  .table-cell {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: var(--foreground);
  }

  tfoot .table-row {
    background-color: var(--muted);
    border-top: 1px solid var(--border);
    font-weight: 500;
  }

  tfoot .table-cell:first-child {
    border-bottom-left-radius: var(--radius-lg);
  }

  tfoot .table-cell:last-child {
    border-bottom-right-radius: var(--radius-lg);
  }

  /* -- Container query: compact table in narrow containers -- */
  @container (max-width: 480px) {
    .table-head,
    .table-cell { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
  }
}