/* ===========================
   Variáveis de Tema
   =========================== */

:root {
    --pattern-bg: #ffffff;
    --pattern-fg: #f9f9f9;
    --pattern-fg-soft: #f9f9f955;

    /* Versão mais escura para polka em telas claras */
    --pattern-fg-polka: #dcdcdc;
    /* cinza mais visível */

    /* Versão mais escura para o padrão wavy em telas claras */
    --pattern-fg-wavy: #e0e0e0;
    /* cinza médio */
    --pattern-fg-wavy-soft: #e0e0e088;
    /* translúcido */
}

/* Apenas em telas pequenas (mobile) E quando o usuário prefere tema escuro */
/* @media (prefers-color-scheme: dark) and (max-width: 768px) {
    :root {
        --pattern-bg: #1e1e1e;
        --pattern-fg: #3a3a3a;
        --pattern-fg-soft: #3a3a3a88;

        /* No escuro, pode manter igual ou clarear um pouco */
        --pattern-fg-polka: #555555;

        /* No escuro já está bom, então mantemos */
        --pattern-fg-wavy: var(--pattern-fg);
        --pattern-fg-wavy-soft: var(--pattern-fg-soft);
    }
} */

/* Tema escuro forçado manualmente */
[data-theme="dark"] {
    --pattern-bg: #1e1e1e;
    --pattern-fg: #3a3a3a;
    --pattern-fg-soft: #3a3a3a88;

    --pattern-fg-polka: #555555;
    /* No escuro já está bom, então mantemos */
    --pattern-fg-wavy: var(--pattern-fg);
    --pattern-fg-wavy-soft: var(--pattern-fg-soft);
}

.ace-pattern-wavy {
  background-color: var(--pattern-bg);
  background-image: repeating-radial-gradient(circle at 0 0, transparent 0, var(--pattern-bg) 10px),
                    repeating-linear-gradient(var(--pattern-fg-wavy-soft), var(--pattern-fg-wavy));
}

.ace-pattern-polka {
    background-color: var(--pattern-bg);
    background-image: radial-gradient(var(--pattern-fg-polka) 0.5px, var(--pattern-bg) 0.5px);
    background-size: 10px 10px;
}

.ace-pattern-polka-v2 {
    background-color: var(--pattern-bg);
    background-image: radial-gradient(var(--pattern-fg-polka) 0.5px, transparent 0.5px),
        radial-gradient(var(--pattern-fg-polka) 0.5px, var(--pattern-bg) 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.ace-pattern-rhombus {
    background-color: var(--pattern-bg);
    background-image: linear-gradient(135deg, var(--pattern-fg) 25%, transparent 25%),
        linear-gradient(225deg, var(--pattern-fg) 25%, transparent 25%),
        linear-gradient(45deg, var(--pattern-fg) 25%, transparent 25%),
        linear-gradient(315deg, var(--pattern-fg) 25%, var(--pattern-bg) 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 10px 10px;
    background-repeat: repeat;
}

.ace-pattern-zigzag {
    background-color: var(--pattern-bg);
    background-image: linear-gradient(135deg, var(--pattern-fg) 25%, transparent 25%),
        linear-gradient(225deg, var(--pattern-fg) 25%, transparent 25%),
        linear-gradient(45deg, var(--pattern-fg) 25%, transparent 25%),
        linear-gradient(315deg, var(--pattern-fg) 25%, var(--pattern-bg) 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
    background-repeat: repeat;
}

.ace-pattern-zigzag-3d {
    background-color: var(--pattern-bg);
    background: linear-gradient(135deg, var(--pattern-fg-soft) 25%, transparent 25%) -10px 0/20px 20px,
        linear-gradient(225deg, var(--pattern-fg) 25%, transparent 25%) -10px 0/20px 20px,
        linear-gradient(315deg, var(--pattern-fg-soft) 25%, transparent 25%) 0 0/20px 20px,
        linear-gradient(45deg, var(--pattern-fg) 25%, var(--pattern-bg) 25%) 0 0/20px 20px;
}

.ace-pattern-moon {
    background-color: var(--pattern-bg);
    background-image: radial-gradient(ellipse farthest-corner at 10px 10px, var(--pattern-fg), var(--pattern-fg) 50%, var(--pattern-bg) 50%);
    background-size: 10px 10px;
}

.ace-pattern-circles {
    background-color: var(--pattern-bg);
    background-image: radial-gradient(circle at center, var(--pattern-fg), var(--pattern-bg)),
        repeating-radial-gradient(circle at center, var(--pattern-fg), var(--pattern-fg) 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;
}

.ace-pattern-diagonal {
    background-color: var(--pattern-bg);
    background: repeating-linear-gradient(45deg, var(--pattern-fg), var(--pattern-fg) 5px, var(--pattern-bg) 5px, var(--pattern-bg) 25px);
}

.ace-pattern-diagonal-v2 {
    background-color: var(--pattern-bg);
    background: repeating-linear-gradient(-45deg, var(--pattern-fg), var(--pattern-fg) 5px, var(--pattern-bg) 5px, var(--pattern-bg) 25px);
}

.ace-pattern-paper {
    background-color: var(--pattern-bg);
    background-image: linear-gradient(var(--pattern-fg) 2px, transparent 2px),
        linear-gradient(90deg, var(--pattern-fg) 2px, transparent 2px),
        linear-gradient(var(--pattern-fg) 1px, transparent 1px),
        linear-gradient(90deg, var(--pattern-fg) 1px, var(--pattern-bg) 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.ace-pattern-isometric {
    background-color: var(--pattern-bg);
    background-image: linear-gradient(30deg, var(--pattern-fg) 12%, transparent 12.5%, transparent 87%, var(--pattern-fg) 87.5%, var(--pattern-fg)),
        linear-gradient(150deg, var(--pattern-fg) 12%, transparent 12.5%, transparent 87%, var(--pattern-fg) 87.5%, var(--pattern-fg)),
        linear-gradient(30deg, var(--pattern-fg) 12%, transparent 12.5%, transparent 87%, var(--pattern-fg) 87.5%, var(--pattern-fg)),
        linear-gradient(150deg, var(--pattern-fg) 12%, transparent 12.5%, transparent 87%, var(--pattern-fg) 87.5%, var(--pattern-fg)),
        linear-gradient(60deg, var(--pattern-fg-soft) 25%, transparent 25.5%, transparent 75%, var(--pattern-fg-soft) 75%, var(--pattern-fg-soft)),
        linear-gradient(60deg, var(--pattern-fg-soft) 25%, transparent 25.5%, transparent 75%, var(--pattern-fg-soft) 75%, var(--pattern-fg-soft));
    background-size: 20px 35px;
    background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

.ace-pattern-lines {
    background-color: var(--pattern-bg);
    background-image: linear-gradient(0deg, var(--pattern-bg) 50%, var(--pattern-fg) 50%);
    background-size: 10px 10px;
}

.ace-pattern-lines-v2 {
    background-color: var(--pattern-bg);
    background-image: linear-gradient(to right, var(--pattern-fg), var(--pattern-fg) 5px, var(--pattern-bg) 5px, var(--pattern-bg));
    background-size: 10px 100%;
}

.ace-pattern-boxes {
    background-color: var(--pattern-bg);
    background-image: linear-gradient(var(--pattern-fg) 1px, transparent 1px),
        linear-gradient(to right, var(--pattern-fg) 1px, var(--pattern-bg) 1px);
    background-size: 20px 20px;
}

.ace-pattern-lines-v3 {
    background-color: var(--pattern-bg);
    background-size: 20px 20px;
    background-image: repeating-linear-gradient(0deg, var(--pattern-fg), var(--pattern-fg) 1px, var(--pattern-bg) 1px, var(--pattern-bg));
}

.ace-pattern-lines-v4 {
    background-color: var(--pattern-bg);
    background-size: 20px 20px;
    background-image: repeating-linear-gradient(to right, var(--pattern-fg), var(--pattern-fg) 1px, var(--pattern-bg) 1px, var(--pattern-bg));
}

.ace-pattern-triangle {
    background-color: var(--pattern-bg);
    background-image: linear-gradient(45deg, var(--pattern-fg) 50%, var(--pattern-bg) 50%);
    background-size: 10px 10px;
}

.ace-pattern-triangle-v2 {
    background-color: var(--pattern-bg);
    opacity: 1;
    background-image: linear-gradient(-45deg, var(--pattern-bg), var(--pattern-bg) 50%, var(--pattern-fg) 50%, var(--pattern-fg));
    background-size: 10px 10px;
}

.ace-pattern-rectangles {
    background-color: var(--pattern-bg);
    background-image: repeating-linear-gradient(45deg, var(--pattern-fg) 25%, transparent 25%, transparent 75%, var(--pattern-fg) 75%, var(--pattern-fg)),
        repeating-linear-gradient(45deg, var(--pattern-fg) 25%, var(--pattern-bg) 25%, var(--pattern-bg) 75%, var(--pattern-fg) 75%, var(--pattern-fg));
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.ace-pattern-cross {
    background-color: var(--pattern-bg);
    background: radial-gradient(circle, transparent 20%, var(--pattern-bg) 20%, var(--pattern-bg) 80%, transparent 80%, transparent),
        radial-gradient(circle, transparent 20%, var(--pattern-bg) 20%, var(--pattern-bg) 80%, transparent 80%, transparent) 25px 25px,
        linear-gradient(var(--pattern-fg) 2px, transparent 2px) 0 -1px,
        linear-gradient(90deg, var(--pattern-fg) 2px, var(--pattern-bg) 2px) -1px 0;
    background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
}