:root {
    --pane-bg:      #ffffff;
    --pane-fg:      #333333;
    --control-bg:   #ffffff;
    --control-fg:   #333333;
    --control-border: #767676;
    --error-bg:     #ffcccc;
    --error-fg:     red;
    --error-border: red;
}

/* Fallback OS-level dark mode (sovrascritta da JS se Office è disponibile) */
@media (prefers-color-scheme: dark) {
    :root {
        --pane-bg:      #1f1f1f;
        --pane-fg:      #f0f0f0;
        --control-bg:   #2d2d2d;
        --control-fg:   #f0f0f0;
        --control-border: #555;
        --error-bg:     #4a0f0f;
        --error-fg:     #ff9999;
        --error-border: #cc0000;
    }
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    padding: 1em;
    background-color: var(--pane-bg);
    color: var(--pane-fg);
}

textarea {
    background-color: var(--control-bg);
    color: var(--control-fg);
    border-color: var(--control-border);
}

:not(:defined) {
    visibility: hidden;
}

fluent-card {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

h2 {
    font-size: var(--type-ramp-plus-5-font-size);
    line-height: var(--type-ramp-plus-5-line-height);
}

#button {
    align-self: flex-end;
}

#error-area {
    border: 1px solid var(--error-border);
    background-color: var(--error-bg);
    color: var(--error-fg);
    padding: 10px;
    margin-bottom: 20px;
    display: none;
}

#error-card {
    border-color: var(--error-border);
    background-color: var(--error-bg);
    color: var(--error-fg);
}