/* Design tokens extraídos das telas de referência do checkout.
   Compartilhado entre o checkout público e o painel admin. */
:root {
  /* Cores */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #000000;
  --color-text-body: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-text-subtle: #8c8c8c;
  --color-border: #e6e6e6;
  --color-border-strong: #000000;
  --color-divider: #eeeeee;
  --color-field-muted: #ededed;       /* campo "Search" dos dropdowns */
  --color-placeholder: #9a9a9a;

  --color-info: #3a8ee6;              /* selo "You pay network fee" */
  --color-info-bg: #e1effd;
  --color-success: #22b35e;           /* timer e selo "Popular choice" */
  --color-success-bg: #e3f6ea;
  --color-danger: #e5484d;
  --color-danger-bg: #fdecec;
  --color-warning: #b7791f;
  --color-warning-bg: #fdf4e3;

  --color-primary: #000000;           /* botão habilitado e ícones de contato */
  --color-primary-text: #ffffff;
  --color-disabled-bg: #eeeeee;
  --color-disabled-text: #8c8c8c;

  /* Tipografia */
  --font-sans: "Onest Variable", "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-display: 34px;               /* "10.3 USD" */

  /* Raios */
  --radius-sm: 8px;                   /* pílula do timer */
  --radius-md: 10px;                  /* botão principal, campo de busca */
  --radius-lg: 12px;                  /* selects e painel do dropdown */
  --radius-card: 28px;                /* card do checkout */
  --radius-pill: 999px;

  /* Sombras */
  --shadow-card: 0 24px 64px rgba(17, 17, 17, 0.08), 0 2px 8px rgba(17, 17, 17, 0.03);
  --shadow-popover: 0 12px 32px rgba(17, 17, 17, 0.12), 0 1px 3px rgba(17, 17, 17, 0.06);

  /* Medidas */
  --control-height: 50px;
  --button-height: 56px;
  --card-width: 560px;
  --card-padding: 32px;
  --focus-ring: 0 0 0 3px rgba(58, 142, 230, 0.35);
}