/* =============================================================================
   Cloudyn — OS TOKENS
   A paleta, a escada de superfície, os raios, as fontes e os desenhos
   em máscara. Nada de seletor: só as variáveis que o resto lê.

   Este arquivo é uma FATIA do antigo assets/css/loader.css, que guardava o site
   inteiro em 1511 linhas. A ordem de carga importa (ver o bloco de <link> no
   HTML): a cascata é a mesma de antes, arquivo a arquivo, na mesma sequência.
   ============================================================================= */

@import './design.css';

:root {
  --black: var(--cloudyn-canvas);
  --white: var(--cloudyn-text);
  --accent: var(--cloudyn-accent);
  --accent-ink: var(--cloudyn-accent-ink);
  /* paleta SUAVE / fraca (minimalista) — tons baixos de saturação */
  --warm-a: var(--cloudyn-clay);
  --warm-b: var(--cloudyn-rose);
  --warm-c: var(--cloudyn-sand);
  /* os mesmos tons, em canais soltos: alfa sem escrever hex novo */
  --accent-rgb: var(--cloudyn-accent-rgb);
  --ink-rgb: var(--cloudyn-canvas-rgb);
  --bone-rgb: var(--cloudyn-text-rgb);
  --warm-a-rgb: 199 159 134;
  --warm-b-rgb: 189 154 154;
  --warm-c-rgb: 216 200 175;

  /* ===================== A ESCADA DE SUPERFÍCIE ============================
     Profundidade aqui NÃO é sombra e não é gradiente: é a escada de fundos
     mais o fio de 1px. Um cartão sobe um degrau de fundo e ganha um fio — e é
     só isso. É o que deixa muita informação perto sem virar barulho.
     Os tons são o off-black da marca clareado em direção ao osso, então a
     escada inteira continua quente como o resto do site.                     */
  --surface-1: var(--cloudyn-surface);
  --surface-2: var(--cloudyn-surface-raised);
  --hairline: var(--cloudyn-border);
  --hairline-strong: var(--cloudyn-border-strong);

  /* os quatro pesos de texto sobre o escuro */
  --ink:          rgb(var(--bone-rgb) / 1);
  --ink-muted:    rgb(var(--bone-rgb) / 0.72);
  --ink-subtle:   rgb(var(--bone-rgb) / 0.5);
  --ink-tertiary: rgb(var(--bone-rgb) / 0.3);

  /* raios: 4 para chip, 8 para botão, 12 para cartão. Botão NUNCA é pílula —
     pílula é o botão da intro, e ele é a exceção justamente por ser gesto. */
  --r-xs: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --marca-simbolo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M80.12%2025.41C77.60%2024.07%2075.66%2023.97%2073.84%2023.77C72.02%2023.57%2070.60%2023.82%2069.21%2024.22C67.81%2024.61%2066.59%2025.16%2065.47%2026.16C64.35%2027.15%2063.00%2028.28%2062.48%2030.19C61.96%2032.11%2061.83%2035.72%2062.33%2037.67C62.83%2039.61%2063.83%2040.28%2065.47%2041.85C67.12%2043.42%2070.83%2045.02%2072.20%2047.09C73.57%2049.15%2073.89%2052.09%2073.69%2054.26C73.49%2056.43%2072.20%2058.37%2071.00%2060.09C69.81%2061.81%2068.21%2063.40%2066.52%2064.57C64.82%2065.74%2063.28%2066.52%2060.84%2067.12C58.40%2067.71%2054.06%2067.41%2051.87%2068.16C49.68%2068.91%2048.63%2070.43%2047.68%2071.60C46.74%2072.77%2046.41%2073.84%2046.19%2075.19C45.96%2076.53%2046.01%2078.35%2046.34%2079.67C46.66%2080.99%2047.26%2082.14%2048.13%2083.11C49.00%2084.08%2049.28%2085.05%2051.57%2085.50C53.86%2085.95%2058.00%2086.57%2061.88%2085.80C65.77%2085.03%2070.93%2083.08%2074.89%2080.87C78.85%2078.65%2082.54%2075.81%2085.65%2072.50C88.76%2069.18%2091.83%2064.52%2093.57%2060.99C95.32%2057.45%2095.99%2054.73%2096.11%2051.27C96.24%2047.81%2095.52%2043.45%2094.32%2040.21C93.12%2036.97%2091.31%2034.30%2088.94%2031.84C86.57%2029.37%2082.64%2026.76%2080.12%2025.41Z%22%2F%3E%3Cpath%20d%3D%22M48.13%2014.20C45.84%2013.73%2041.60%2013.15%2037.82%2013.90C34.03%2014.65%2029.57%2016.19%2025.41%2018.68C21.25%2021.18%2016.04%2025.49%2012.86%2028.85C9.67%2032.21%207.80%2035.35%206.28%2038.86C4.76%2042.38%203.89%2046.51%203.74%2049.93C3.59%2053.34%204.16%2056.25%205.38%2059.34C6.60%2062.43%208.62%2065.89%2011.06%2068.46C13.50%2071.03%2017.74%2073.47%2020.03%2074.74C22.32%2076.01%2023.07%2075.91%2024.81%2076.08C26.56%2076.26%2028.92%2076.16%2030.49%2075.78C32.06%2075.41%2033.08%2074.91%2034.23%2073.84C35.38%2072.77%2036.77%2070.88%2037.37%2069.36C37.97%2067.84%2037.97%2066.09%2037.82%2064.72C37.67%2063.35%2038.27%2063.03%2036.47%2061.14C34.68%2059.24%2028.95%2055.88%2027.06%2053.36C25.16%2050.85%2025.01%2048.26%2025.11%2046.04C25.21%2043.82%2026.41%2041.88%2027.65%2040.06C28.90%2038.24%2030.89%2036.35%2032.59%2035.13C34.28%2033.91%2035.38%2033.31%2037.82%2032.74C40.26%2032.16%2044.92%2032.44%2047.23%2031.69C49.55%2030.94%2050.70%2029.47%2051.72%2028.25C52.74%2027.03%2053.11%2025.73%2053.36%2024.36C53.61%2022.99%2053.51%2021.30%2053.21%2020.03C52.91%2018.76%2052.42%2017.71%2051.57%2016.74C50.72%2015.77%2050.42%2014.67%2048.13%2014.20Z%22%2F%3E%3C%2Fsvg%3E");
  /* O VISTO DA LISTA DE PLANOS. Desenho único, decodificado uma vez e usado
     como máscara: a cor sai do token (--ink), não do arquivo. */
  --visto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22%2F%3E%3C%2Fsvg%3E");
  --brand-font: var(--cloudyn-brand-font);
  --body-font: var(--cloudyn-font);
  --word-size: clamp(3.5rem, 16vw, 13rem);
}