/*
  Design Family: oat-reel
  Loja de produto de uso diário com cara de filme: o destaque é uma sequência de vídeos curtos sob um véu escuro em
  vinheta, com a abertura do título que aparece palavra a palavra sobre o creme; cada categoria é uma faixa arredondada
  com a própria foto, o nome gigante em letra fina e os cartões dos produtos por cima; o produto gira no mouse (um vídeo
  curto dele girando, desde a v1.65.1; antes, um frasco 3D). Creme e grafite, uma cor por categoria (oliva, grafite-azulado, caramelo) e rótulos em letra de máquina.
  v1.65: inspirada em references/supplements/reference-01 (variação, R32). A Lya escolheu o esboço A (creme e oliva).
  Escopo por atributo (R11).
*/
[data-ws2-family="oat-reel"] {
  --or-paper: #FFFDF7;          /* creme: a página */
  --or-paper-rgb: 255, 253, 247;
  --or-soft: #F4F0E6;           /* botão claro e fundo de cartão secundário */
  --or-line: rgba(43, 42, 39, .16);
  --or-ink: #2B2A27;            /* grafite: texto (14,1:1 no creme) e botão escuro */
  --or-ink-rgb: 43, 42, 39;
  --or-muted: #67645C;          /* apoio (5,8:1 no creme; 5,3:1 no creme escuro) */
  --or-dark: #2F2E2B;           /* o bloco do rodapé */
  --or-on-dark: #FFFDF7;
  --or-on-dark-muted: #BDB8AC;  /* 6,9:1 no grafite */
  --or-accent: #5E6E4B;         /* oliva: botão de compra (branco por cima, 5,5:1) e palavra de destaque (5,4:1 no creme) */
  --or-accent-ink: #5E6E4B;
  --or-clay: #8C5F41;           /* caramelo: segunda categoria de cor (branco por cima 5,5:1) */
  --or-glass: rgba(40, 37, 32, .7);   /* a pílula do menu e os cartões de vidro sobre vídeo */

  --or-font-display: "Albert Sans", "Helvetica Neue", Arial, sans-serif;   /* fina (300) nos títulos grandes */
  --or-font-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --or-font-mono: "DM Mono", ui-monospace, monospace;                    /* rótulos, números e a faixa do topo */
  --or-h1: clamp(2.8rem, 7.6vw, 7.2rem);
  --or-display: clamp(2.4rem, 5vw, 4.6rem);
  --or-band: clamp(4rem, 13vw, 12.5rem);
  --or-leading-tight: .98;
  --or-track: -.035em;

  --or-radius: 6px;             /* botões, cartões e faixas (o vidro e a pílula usam o mesmo raio) */
  --or-radius-lg: 10px;
  --ws2-social-radius: 999px;
  --or-gutter: 12px;            /* a borda das faixas arredondadas */
  --or-section-y: clamp(72px, 10vw, 160px);

  --or-motion-profile: "reel-intro";
  --or-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Esquemas de acento (R26) ------------------------------------------------------------------------
   A identidade é a sequência de vídeos com o véu, a abertura do título, as faixas com vídeo e o frasco que gira. O
   acento troca só o botão de compra e a palavra de destaque; branco sobre ele fica sempre ≥ 4,5:1.
   Uso: <body data-ws2-family="oat-reel" data-ws2-accent="caramelo"> */
[data-ws2-family="oat-reel"][data-ws2-accent="caramelo"] { --or-accent: #8C5F41; --or-accent-ink: #8C5F41; }
[data-ws2-family="oat-reel"][data-ws2-accent="grafite"] { --or-accent: #3E4650; --or-accent-ink: #3E4650; }