/* Design tokens — ver DESIGN.md. Ficheiro escrito à mão, ao contrário de
   tailwind.css (gerado).

   Sempre light — sem dark mode. Valores literais Tailwind (preto/branco/
   gray-*), confirmados contra a produção (https://youtube.feorylab.net/):
   html #f9fafb, cartões #fff, borda #e5e7eb. Houve uma tentativa de dark
   mode (OKLCH e depois gray-900 literal) entre commits; o utilizador pediu
   para manter só as cores originais — sem variante escura. */

:root {
    --ink: #000000;
    --ink-hover: #1f2937;
    --ink-contrast: #ffffff;

    --fg-primary: #111827;
    --fg-secondary: #374151;
    --fg-tertiary: #6b7280;
    --fg-quaternary: #9ca3af;

    --surface: #ffffff;
    --surface-sunken: #f9fafb;
    --surface-muted: #f3f4f6;

    --border-subtle: #f3f4f6;
    --border-default: #e5e7eb;
    --border-strong: #d1d5db;

    --danger: #ef4444;
    --danger-fg: #dc2626;
    --danger-bg: #fee2e2;

    --success: #22c55e;
    --success-fg: #16a34a;
    --success-bg: #dcfce7;

    --warning: #f59e0b;
    --warning-fg: #d97706;
    --warning-bg: #fef3c7;

    --shadow-rest: 0 1px 2px rgb(0 0 0 / 0.05);
    --shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-float: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Pills — componente de selecção (qualidade/formato em index.html e
   transferir.html). Era copiado byte-a-byte no <style> de cada página;
   fica só aqui, DESIGN.md: option-pill é o componente mais bem resolvido
   do sistema. */
.option-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    border-radius: 9999px;
    border: 1.5px solid var(--border-default);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
    user-select: none;
    color: var(--fg-secondary);
    background: var(--surface);
    line-height: 1.4;
}
.option-pill:hover { border-color: var(--border-strong); background: var(--surface-sunken); }
input[type="radio"]:checked + .option-pill {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ink-contrast);
}

/* Preview de vídeo/website a aparecer — mesma razão: duplicado nas duas páginas. */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}
.video-preview.show {
    display: block !important;
    animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobile — iOS faz zoom ao focar campos com fonte <16px; alvos de toque
   maiores em ecrãs tácteis (pointer: coarse). */
@media (max-width: 639px) {
    input:not([type="radio"]):not([type="checkbox"]), textarea, select { font-size: 16px !important; }
}
@media (pointer: coarse) {
    .option-pill { padding: 0.5rem 1rem; min-height: 2.5rem; }
    .file-card button, .file-card a[download] { min-height: 2.25rem; padding-inline: 0.75rem; }
    .file-checkbox { width: 1.25rem; height: 1.25rem; }
}