/*
  Design Family: toffee-orbit
  Cafeteria com o sabor que muda dentro do copo: destaque cor de doce de leite com o copo de vidro sobre uma tábua, os
  ingredientes em cartões de vidro numa órbita em volta dele — o da vez voa para dentro e a foto nova enche o copo de
  baixo para cima. Letra gordinha e simpática (Caprasimo) nos títulos, grotesca neutra (Hanken Grotesk) no texto, café
  escuro na tinta e vermelho-goiaba só em botão, preço e pouco texto grande.
  v1.63: inspirada em references/food/reference-01 (variação, R32). A Lya escolheu, entre esboços, o fundo de doce de
  leite e a órbita.
  Escopo por atributo (R11).
*/
[data-ws2-family="toffee-orbit"] {
  --to-caramel: #E6C49A;       /* o destaque: doce de leite */
  --to-glow: #D8A774;          /* o brilho atrás do copo */
  --to-paper: #F7ECDD;         /* a página */
  --to-card: #FFF7EC;          /* cartões */
  --to-band: #EFDDC4;          /* faixa alternada */
  --to-ink: #2A160C;           /* café escuro: texto e títulos (14,8:1 no papel; 10,4:1 no caramelo) */
  --to-ink-rgb: 42, 22, 12;
  --to-muted: #6B4A36;         /* apoio (6,8:1 no papel; 4,8:1 no caramelo) */
  --to-accent: #B5362F;        /* vermelho-goiaba: fundo de botão e preço, com creme por cima (5,6:1); nunca texto pequeno no caramelo */
  --to-on-accent: #FFF7EC;
  --to-accent-ink: #93281F;    /* goiaba para texto (5,0:1 no caramelo; 7,0:1 no papel) */
  --to-dark: #2A160C;          /* faixa, fechamento e rodapé */
  --to-on-dark: #F7ECDD;
  --to-on-dark-muted: #D9C2A5; /* 10:1 no escuro */
  --to-on-dark-line: rgba(247, 236, 221, .14);
  --to-line: rgba(42, 22, 12, .12);
  --to-line-strong: rgba(42, 22, 12, .22);
  --to-glass: rgba(255, 247, 236, .52);        /* cartão de vidro do ingrediente */
  --to-glass-edge: rgba(255, 255, 255, .78);
  --to-glass-dark: rgba(255, 247, 236, .08);   /* o mesmo vidro sobre o escuro */

  --to-font-heading: "Caprasimo", "Cooper Black", Georgia, serif;   /* gordinha e simpática */
  --to-heading-weight: 400;
  --to-font-body: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --to-h1: clamp(2.6rem, 7.4vw, 6.4rem);
  --to-h2: clamp(2rem, 4.6vw, 3.4rem);
  --to-h3: 1.4rem;
  --to-lead: clamp(1.04rem, 1.6vw, 1.2rem);
  --to-heading-leading: 1.02;
  --to-heading-track: -.01em;
  --to-body-leading: 1.6;
  --to-label: .78rem;          /* rótulo: caixa-alta, 700, espaçamento .16em */

  --to-radius: 22px;           /* cartão */
  --to-radius-tile: 26%;       /* cartão de vidro do ingrediente */
  --to-radius-cta: 32px;
  --to-radius-pill: 999px;
  --ws2-social-radius: 999px;
  --ws2-map-radius: 22px;
  --to-shadow: 0 22px 44px -30px rgba(42, 22, 12, .45);
  --to-shadow-tile: 0 18px 36px -18px rgba(42, 22, 12, .45);

  --to-container: 1200px;
  --to-gutter: 16px;
  --to-section-y: clamp(56px, 8vw, 112px);
  --to-header-h: 72px;

  --to-motion-profile: "orbit-pour";
  --to-ease: cubic-bezier(.22, 1, .36, 1);
  --to-fill: 1.1s;             /* a foto nova enche o copo de baixo para cima */
  --to-float: 7s;              /* os cartões de vidro flutuam */
}

/* Esquemas de acento (R26) ------------------------------------------------------------------------
   A identidade é o destaque de doce de leite com a órbita de ingredientes e o copo que enche, a letra gordinha e o café
   escuro na tinta. O acento troca só o vermelho-goiaba de botão e preço; o creme por cima fica sempre ≥ 4,5:1.
   Uso: <body data-ws2-family="toffee-orbit" data-ws2-accent="cafe"> */
[data-ws2-family="toffee-orbit"][data-ws2-accent="cafe"] {      /* café torrado: para casa mais sóbria */
  --to-accent: #5A2E1A; --to-accent-ink: #4A2516;
}
/* Esquemas completos (v1.71.4, decisão da Lya) -------------------------------------------------------
   Na confeitaria pequena a marca se reconhece pela cor, então estes três tingem também a tinta, os cartões (--to-tint), a faixa
   escura (--to-deep) e o mapa; a página continua clara e a estrutura, a letra e a forma não mudam (R26). O cardápio de doces usa o
   preto e branco como oficial; rosa, pistache e o goiaba (doce de leite) são as variações. Contraste conferido: branco no acento ≥ 5,7:1,
   apoio ≥ 4,5:1 no cartão, na faixa e no caramelo. */
[data-ws2-family="toffee-orbit"][data-ws2-accent="preto-e-branco"] {   /* sem cor além das fotos */
  --to-ink: #111111; --to-ink-rgb: 17, 17, 17; --to-muted: #555555; --to-ink-hover: #333333;
  --to-accent: #111111; --to-accent-ink: #111111; --to-on-accent: #FFFFFF;
  --to-band: #EDEDED; --to-caramel: #EDEDED; --to-tint: #F3F3F3; --to-tint-bar: rgba(243, 243, 243, .97);
  --to-dark: #000000; --to-deep: #000000; --to-on-dark: #FFFFFF; --to-on-dark-muted: #BDBDBD; --to-on-dark-line: rgba(255, 255, 255, .16);
  --to-line: rgba(0, 0, 0, .12); --to-line-strong: rgba(0, 0, 0, .24);
  --to-map: #EFEFEF; --to-map-edge: #DCDCDC; --to-hero-soft: #F2F2F2;
}
[data-ws2-family="toffee-orbit"][data-ws2-accent="rosa"] {             /* cartões rosa-claro, ameixa no texto, rosa forte no botão */
  --to-ink: #4A1630; --to-ink-rgb: 74, 22, 48; --to-muted: #723F59; --to-ink-hover: #6A2446;
  --to-accent: #C2255C; --to-accent-ink: #A01D4C; --to-on-accent: #FFFFFF;
  --to-band: #F9DCE6; --to-caramel: #F6B9CD; --to-tint: #FDEBF1; --to-tint-bar: rgba(253, 235, 241, .97);
  --to-dark: #2A0A19; --to-deep: #2A0A19; --to-on-dark: #FDEBF1; --to-on-dark-muted: #E9C3D2; --to-on-dark-line: rgba(253, 235, 241, .14);
  --to-line: rgba(74, 22, 48, .12); --to-line-strong: rgba(74, 22, 48, .22);
  --to-map: #FBE4EC; --to-map-edge: #F2C9D7; --to-hero-soft: #FCE3EC;
}
[data-ws2-family="toffee-orbit"][data-ws2-accent="pistache"] {         /* verde de pistache com creme */
  --to-ink: #22301A; --to-ink-rgb: 34, 48, 26; --to-muted: #4C5A41; --to-ink-hover: #34472A;
  --to-accent: #4A6F2A; --to-accent-ink: #3B5A21; --to-on-accent: #FFFFFF;
  --to-band: #E3EBD2; --to-caramel: #CFDFAE; --to-tint: #EFF4E4; --to-tint-bar: rgba(239, 244, 228, .97);
  --to-dark: #141C0E; --to-deep: #141C0E; --to-on-dark: #F1F6E6; --to-on-dark-muted: #C6D3B0; --to-on-dark-line: rgba(241, 246, 230, .14);
  --to-line: rgba(34, 48, 26, .12); --to-line-strong: rgba(34, 48, 26, .22);
  --to-map: #EAF0DC; --to-map-edge: #D6E2BC; --to-hero-soft: #F1F6E6;
}