@import url('./main-layout.css');
@import url('./card.css');

 html {
      --lumo-shade-5pct: rgba(33, 33, 33, 0.05);
      --lumo-shade-10pct: rgba(33, 33, 33, 0.1);
      --lumo-shade-20pct: rgba(33, 33, 33, 0.2);
      --lumo-shade-30pct: rgba(33, 33, 33, 0.3);
      --lumo-shade-40pct: rgba(33, 33, 33, 0.4);
      --lumo-shade-50pct: rgba(33, 33, 33, 0.5);
      --lumo-shade-60pct: rgba(33, 33, 33, 0.6);
      --lumo-shade-70pct: rgba(33, 33, 33, 0.7);
      --lumo-shade-80pct: rgba(33, 33, 33, 0.8);
      --lumo-shade-90pct: rgba(33, 33, 33, 0.9);
      --lumo-primary-color-50pct: rgba(235, 89, 5, 0.5);
      --lumo-primary-color-10pct: rgba(235, 89, 5, 0.1);
      --lumo-error-color-50pct: rgba(231, 24, 24, 0.5);
      --lumo-error-color-10pct: rgba(231, 24, 24, 0.1);
      --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
      --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);
      --lumo-shade: hsl(0, 0%, 13%);
      --lumo-primary-color: hsl(22, 96%, 47%);
      --lumo-primary-text-color: hsl(22, 100%, 42%);
      --lumo-error-color: hsl(0, 81%, 50%);
      --lumo-error-text-color: hsl(0, 86%, 45%);
      --lumo-success-color: hsl(159, 76%, 57%);
      --lumo-success-contrast-color: hsl(159, 29%, 10%);
      --lumo-success-text-color: hsl(159, 61%, 40%);

    }

    [theme~="dark"] {
      --lumo-shade-5pct: rgba(33, 33, 33, 0.05);
      --lumo-shade-10pct: rgba(33, 33, 33, 0.1);
      --lumo-shade-20pct: rgba(33, 33, 33, 0.2);
      --lumo-shade-30pct: rgba(33, 33, 33, 0.3);
      --lumo-shade-40pct: rgba(33, 33, 33, 0.4);
      --lumo-shade-50pct: rgba(33, 33, 33, 0.5);
      --lumo-shade-60pct: rgba(33, 33, 33, 0.6);
      --lumo-shade-70pct: rgba(33, 33, 33, 0.7);
      --lumo-shade-80pct: rgba(33, 33, 33, 0.8);
      --lumo-shade-90pct: rgba(33, 33, 33, 0.9);
      --lumo-primary-color-50pct: rgba(235, 89, 5, 0.5);
      --lumo-primary-color-10pct: rgba(235, 89, 5, 0.1);
      --lumo-error-color-50pct: rgba(231, 24, 24, 0.5);
      --lumo-error-color-10pct: rgba(231, 24, 24, 0.1);
      --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
      --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);
      --lumo-shade: hsl(0, 0%, 13%);
      --lumo-primary-color: hsl(22, 96%, 47%);
      --lumo-primary-text-color: hsl(22, 100%, 42%);
      --lumo-error-color: hsl(0, 81%, 50%);
      --lumo-error-text-color: hsl(0, 86%, 45%);
      --lumo-success-color: hsl(159, 76%, 57%);
      --lumo-success-contrast-color: hsl(159, 29%, 10%);
      --lumo-success-text-color: hsl(159, 61%, 40%);

    }

    .luwid-card {
      background-color: var(--lumo-base-color);
      border-radius: 20px;
      box-shadow: var(--lumo-box-shadow-xs);
      padding: calc(var(--lumo-space-s) * 1.5) var(--lumo-space-m);
      margin: 5px;
    }

    .centered-unordered-list {
        margin: 0 auto;
    }




    /* Gaya global untuk seluruh elemen input Vaadin */
    :root {
        --vaadin-input-field-background: white; /* Background putih */
        --vaadin-input-field-border-color: var(--lumo-contrast-50pct); /* Border seperti pada Grid */
        --vaadin-input-field-border-width: 0.5px; /* Border lebar 0.5px */
        --vaadin-input-field-border-radius: var(--lumo-border-radius); /* Border radius untuk sudut melengkung */
    }

    /* Fokus pada seluruh input */
    vaadin-input-field[focused] {
        --vaadin-input-field-border-color: var(--lumo-primary-color); /* Border berubah saat fokus */
    }

    /* Disabled seluruh input */
    vaadin-input-field[disabled] {
        --vaadin-input-field-background: var(--lumo-contrast-5pct); /* Latar belakang lebih terang */
        --vaadin-input-field-border-color: var(--lumo-contrast-20pct); /* Border saat disabled */
    }




.judul-text {
    font-size: 24px;
    font-weight: bold;
}

.deskripsi-text {
    font-size: 16px;
}

/* Jika lebar layar di bawah 600px (mobile), kecilkan font */
@media (max-width: 600px) {
    .judul-text {
        font-size: 15px;
        line-height: 0.8;
    }
    .deskripsi-text {
        font-size: 12px;
        line-height: 1.4;
    }
}