/* Ponte do Lead Studio: as fontes locais (Geist e Rubik, em public/admin/fonts/) e as variáveis --ls-* que o app.css
   lê, resolvidas a partir da pele honey (--jb-*). Ouro é marca, preto é ação. Desenho: .shuri/desenho/honey/ (07/10). */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-0.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-1.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/geist-2.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/geist-3.woff2) format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/rubik-0.woff2) format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/rubik-1.woff2) format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/rubik-2.woff2) format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/rubik-3.woff2) format('woff2');
}
/* Ponte de marca. Declarada no body para resolver a pele no mesmo elemento. */
:root, [data-skin="honey"] {
  --ls-brand: #F5B301;
  --ls-black: #141414;
  /* Ouro de dado: só barra, área e traço de gráfico. Ouro de marca (--ls-brand): só a lateral e superfície. */
  --ls-brand-data: #E0A300;
  /* Ouro como texto: escurecido para 4,5:1 sobre chão, papel e superfície 2 (o #B07F00 do pedido dava 3,4:1). */
  --ls-brand-text: #8A6400;
  --ls-brand-ink: var(--ls-black);
  /* Wash da marca a 12% (o creme do bloco da marca); o item ativo da lateral usa 30%, do desenho de 07/10. */
  --ls-brand-wash: color-mix(in srgb, var(--ls-brand) 12%, var(--ls-paper));
  /* O mesmo wash, preso ao papel: o flutuante é papel nas duas cascas (a tinta escurece o --ls-brand-wash). */
  --ls-brand-wash-paper: color-mix(in srgb, var(--ls-brand) 12%, var(--ls-paper));
  --ls-on-brand: #141414;
  --ls-highlight: #FFD60A;
  --ls-ground: var(--jb-ground, #FAF9F5);
  --ls-paper: var(--jb-surface, #FFFEFA);
  --ls-cell: var(--jb-surface, #FFFEFA);
  --ls-surface-2: var(--jb-surface-2, #EFEDE6);
  --ls-hair: var(--jb-hair, #DCD8CF);
  --ls-text: var(--jb-text, #141414);
  --ls-text-2: var(--jb-text-2, #49463F);
  --ls-text-3: var(--jb-text-3, #68645C);
  --ls-good: var(--jb-good-ink, #49463F);
  --ls-warn: var(--jb-warn-ink, #49463F);
  --ls-err: var(--jb-bad-ink, #7F2038);
  --ls-bad: var(--ls-err);
  --ls-good-bg: var(--ls-surface-2);
  --ls-warn-bg: var(--ls-surface-2);
  --ls-bad-bg: color-mix(in srgb, var(--ls-bad) 8%, var(--ls-paper));
  --ls-font-ui: var(--jb-font-ui, 'Geist', sans-serif);
  --ls-font-display: var(--jb-font-display, 'Rubik', sans-serif);
  --ls-mono: var(--jb-font-mono, 'Geist', sans-serif);
  --ls-hot: var(--ls-text);
  --ls-ring: var(--ls-black);
  --ls-focus-ring: 0 0 0 2px var(--ls-paper), 0 0 0 4px var(--ls-ring);
  --ls-action: var(--ls-black);
  --ls-action-hover: var(--ls-text-2);
  --ls-on-action: var(--ls-paper);
  --ls-transparent: transparent;
  --ls-current: currentColor;
  /* Cor de empresa: só no monograma. */
  --ls-front-a: #1F4FA8;
  --ls-front-b: var(--ls-text-2);
  /* Letra do monograma da empresa: clara sobre a cor da empresa (fundo da pastilha). */
  --ls-on-front: #FFFFFF;
  /* Clara é o padrão, mesmo sem data-casca. */
  --ls-side-bg: var(--ls-ground);
  --ls-side-text: var(--ls-black);
  --ls-side-muted: var(--ls-text-3);
  --ls-side-active: color-mix(in srgb, var(--ls-brand) 30%, var(--ls-paper));
  --ls-side-selected: var(--ls-black);
  --ls-side-hover: var(--ls-surface-2);
  --ls-side-focus-ring: var(--ls-focus-ring);
  /* Sombra do material flutuante da casca (a pele zera --jb-shadow-overlay). */
  --ls-shadow-floating: 0 8px 24px rgba(20, 20, 20, .18);
}
html[data-casca="clara"], html[data-casca="clara"] [data-skin="honey"], [data-skin="honey"][data-casca="clara"] {
  --ls-shadow-floating: 0 8px 24px rgba(20, 20, 20, .18);
  --ls-side-bg: var(--ls-ground);
  --ls-side-text: var(--ls-black);
  --ls-side-muted: var(--ls-text-3);
  --ls-side-active: color-mix(in srgb, var(--ls-brand) 30%, var(--ls-paper));
  --ls-side-selected: var(--ls-black);
  --ls-side-hover: var(--ls-surface-2);
  --ls-side-focus-ring: var(--ls-focus-ring);
}
html[data-casca="tinta"], html[data-casca="tinta"] [data-skin="honey"], [data-skin="honey"][data-casca="tinta"] {
  --ls-shadow-floating: 0 8px 24px rgba(20, 20, 20, .45);
  --ls-brand-wash: color-mix(in srgb, var(--ls-brand) 22%, var(--ls-black));
  --ls-side-bg: var(--ls-black);
  --ls-side-text: var(--ls-paper);
  --ls-side-muted: #BDB8AE;
  --ls-side-active: var(--ls-brand-wash);
  --ls-side-selected: var(--ls-paper);
  --ls-side-hover: #2B2B2B;
  /* A faixa clara separa o anel preto da lateral preta. */
  --ls-side-focus-ring: 0 0 0 2px var(--ls-black), 0 0 0 4px var(--ls-paper), 0 0 0 6px var(--ls-black);
}