/* ==========================================================
   Garage Camisetas — tokens do tema
   Mobile-first: tudo aqui vale a partir de 320px.
   ========================================================== */

:root {
    /* superfícies */
    --fundo:        #0e1117;
    --fundo-2:      #161b26;
    --fundo-3:      #1e2533;
    --borda:        #2a3242;
    --borda-forte:  #3a4456;

    /* texto */
    --texto:        #e6e9ef;
    --texto-2:      #9aa4b8;
    --texto-3:      #6b7689;

    /* marca */
    --ouro:         #ffc94d;
    --ouro-escuro:  #d9a520;
    --ouro-suave:   rgba(255, 201, 77, .12);

    /* estados */
    --ok:           #3ecf8e;
    --aviso:        #f0a63a;
    --erro:         #f0605d;
    --info:         #58a6ff;

    /* medidas */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 16px;
    --gap:  16px;

    /* Altura da barra do topo. Quem gruda logo abaixo dela (barras sticky)
       usa esta variável — assim mexer no topo não desalinha o resto. */
    --topo-h: 88px;

    --sombra:    0 2px 8px rgba(0,0,0,.35);
    --sombra-lg: 0 8px 28px rgba(0,0,0,.45);

    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "Cascadia Code", "Consolas", monospace;

    /* xadrez para indicar transparência da arte */
    --xadrez:
        linear-gradient(45deg, #2a3242 25%, transparent 25%),
        linear-gradient(-45deg, #2a3242 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2a3242 75%),
        linear-gradient(-45deg, transparent 75%, #2a3242 75%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a { color: var(--ouro); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Foco sempre visível — navegação por teclado no estúdio importa. */
:focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 2px;
}