/* Lumeli design system: tokens (RF-33). Valores medidos no apple.com em 11/10/2026 (variáveis --sk-* da Apple e
   estilos computados da Store, da página do iPhone, da compra do iPhone, da verificação de cobertura e da documentação
   de desenvolvedor); ver a seção "Measured corrections" do DESIGN.md. "Ajuste" marca o que é do Lumeli, com o motivo.
   Toda cor, fonte, raio, espaço e sombra vem daqui. O tema do cliente (/theme.css) redefine tokens só em :root
   (ver themes/default.css); nenhum componente usa valor literal. */
:root {
  color-scheme: light dark;

  /* cor: superfícies e texto */
  --color-bg: #f5f5f7;                  /* sk-fill-tertiary: fundo da página */
  --color-surface: #ffffff;             /* sk-fill: cartões, campos, quadros */
  --color-surface-2: #f5f5f7;           /* áreas rebaixadas mostram o fundo */
  --color-surface-field: rgba(255, 255, 255, 0.8); /* form-textbox: fundo do campo */
  --color-fill: #e8e8ed;                /* sk-fill-gray-quaternary: item selecionado do menu, trilho de abas, tag */
  --color-fill-hover: #d2d2d7;          /* sk-fill-gray-tertiary */
  --color-text: #1d1d1f;                /* sk-glyph-gray: texto */
  --color-text-muted: #6e6e73;          /* sk-glyph-gray-secondary: 5,07:1 no branco, 4,66:1 no fundo */
  --color-text-secondary: #424245;      /* sk-glyph-gray-secondary-alt: texto secundário sobre fill ou tinta (8,20:1 no fill) */
  --color-border: #d2d2d7;              /* divisória (rf-bfe-summary-border) */
  --color-border-subtle: #e8e8ed;       /* separador leve (rf-bfe-stickybar-header) */
  --color-border-strong: #86868b;       /* contorno de campo e de opção (form-textbox, form-selector): 3,62:1 */
  --color-card-border: transparent;     /* cartão: sem borda no claro, só sombra */
  --color-nav-selected: var(--color-fill);          /* item selecionado do menu lateral (navigator da Apple) */
  --color-nav-selected-text: var(--color-link);     /* azul no claro: 4,56:1 sobre #e8e8ed */

  /* cor: ação. O azul de preenchimento e o de link são diferentes no apple.com. */
  --color-primary: #0071e3;             /* sk-fill-blue: botão; texto branco por cima com 4,70:1 */
  --color-primary-hover: #0076df;       /* sk-button-background-hover */
  --color-primary-active: #006edb;      /* sk-button-background-active */
  --color-primary-contrast: #ffffff;
  --color-link: #0066cc;                /* sk-body-link-color: links e marcas na cor de ação */
  --color-primary-on-dark: #2997ff;     /* link no modo escuro */
  --color-focus: #0071e3;               /* sk-focus-color */
  --color-neutral-hover: #272729;       /* button-secondary-neutral: hover enche de escuro */
  --color-neutral-active: #18181a;
  --color-neutral-hover-text: #ffffff;

  /* cor: estado (sk-glyph-* e sk-fill-*-secondary) */
  --color-success: #008009;
  --color-warning: #b64400;
  --color-error: #e30000;
  --color-success-tint: #f5fff6;
  --color-warning-tint: #fff9f4;
  --color-error-tint: #fff2f4;
  --color-row-attention: var(--color-warning-tint); /* linha que pede ação (reserva pendente) */

  /* cor: barra superior e trilho (global-nav claro) */
  --color-chrome: #fafafc;              /* globalnav-background */
  --color-chrome-text: rgba(0, 0, 0, 0.8); /* r-globalnav-color */
  --color-chrome-text-hover: #000000;   /* r-globalnav-color-hover */
  --color-chrome-muted: #6e6e73;
  --color-chrome-border: transparent;

  /* tipografia (SF Pro pelo system-ui nos aparelhos da Apple; Segoe UI e Roboto nos demais; nada de fonte externa: CSP) */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-display: var(--font-family-base);
  --font-family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Escala com espaçamento e entrelinha por tamanho, como no apple.com (letter-spacing medido em px, aqui em em). */
  --font-size-xs: 0.75rem;              /* 12 */
  --font-size-sm: 0.875rem;             /* 14 */
  --font-size-md: 1.0625rem;            /* 17 */
  --font-size-lg: 1.3125rem;            /* 21 */
  --font-size-xl: 1.75rem;              /* 28 */
  --font-size-2xl: 2.125rem;            /* 34 */
  --font-size-3xl: 2.5rem;              /* 40: título de página (documentação da Apple) */
  --tracking-xs: -0.01em;               /* -0,12px */
  --tracking-sm: -0.016em;              /* -0,224px */
  --tracking-md: -0.022em;              /* -0,374px */
  --tracking-lg: 0.011em;               /* +0,231px */
  --tracking-xl: 0.007em;               /* +0,196px */
  --tracking-2xl: -0.011em;             /* -0,374px */
  --tracking-3xl: -0.009em;             /* -0,374px */
  --leading-xs: 1.33337;
  --leading-sm: 1.42859;
  --leading-md: 1.47059;                /* corpo */
  --leading-md-tight: 1.23536;          /* 17px em títulos curtos */
  --leading-lg: 1.19048;
  --leading-xl: 1.14286;
  --leading-2xl: 1.17648;
  --leading-3xl: 1.1;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* nomes antigos, mantidos para quem ainda os usa */
  --line-height-tight: var(--leading-xl);
  --line-height-base: var(--leading-md);

  /* forma: 6px item de menu; 12px campos, opções e menus; 18px cartões; pílula ações; círculo botões de ícone */
  --radius-xs: 5px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 980px;                 /* sk-button-border-radius */
  --radius-button: var(--radius-pill);
  --radius-chip: var(--radius-pill);
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-nav: var(--radius-sm);

  /* espaço */
  --space-1: 0.25rem;                   /* 4 */
  --space-2: 0.5rem;                    /* 8 */
  --space-3: 0.75rem;                   /* 12 */
  --space-4: 1.0625rem;                 /* 17 */
  --space-5: 1.5rem;                    /* 24 */
  --space-6: 2rem;                      /* 32 */
  --space-8: 3rem;                      /* 48 */

  /* tamanhos, camadas, sombras e movimento */
  --size-control: 2.75rem;              /* 44: botão */
  --size-control-sm: 2.25rem;           /* 36: botão pequeno (quicklinks: 38) */
  --size-field: 3.5rem;                 /* 56: form-textbox */
  --size-topbar: 2.75rem;               /* 44: r-globalnav-height */
  --container-max: 64rem;
  --container-narrow: 26rem;
  --container-form: 40rem;
  --gutter: var(--space-4);
  --sticky-offset: 4rem;                /* scroll-padding sob títulos grudados (WCAG 2.4.11) */
  --shadow-card: 2px 4px 12px rgba(0, 0, 0, 0.08);        /* rf-ccard-content */
  --shadow-card-hover: 2px 4px 16px rgba(0, 0, 0, 0.16);  /* rf-ccard-content:hover, com scale(1.01) */
  --shadow-popover: 0 10px 30px rgba(0, 0, 0, 0.12);      /* ajuste: menu flutuante */
  --shadow-segment: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); /* segmento selecionado */
  --z-sticky: 2;
  --z-menu: 5;
  --z-skip: 10;
  --duration-press: 120ms;
  --duration-hover: 0.3s;               /* rf-ccard: 0.3s cubic-bezier(0, 0, 0.5, 1) */
  --duration-label: 0.125s;             /* form-textbox-label: 0.125s ease-in */
  --ease-out: cubic-bezier(0, 0, 0.5, 1);
}

/* Modo escuro. Ajuste: o apple.com quase não tem interface escura; a barra usa o #161617 da Apple e as superfícies
   vêm das faixas escuras (#272729). No escuro o cartão troca a sombra (invisível) por uma borda. O tema do cliente
   não precisa de bloco escuro: --color-link lê --color-primary-on-dark, que o tema redefine em :root. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1d1d1f;
    --color-surface: #272729;
    --color-surface-2: #1d1d1f;
    --color-surface-field: #272729;
    --color-fill: #3a3a3c;
    --color-fill-hover: #48484a;
    --color-text: #f5f5f7;
    --color-text-muted: #aeaeb2;
    --color-text-secondary: #d1d1d6;
    --color-border: #424245;
    --color-border-subtle: #38383a;
    --color-border-strong: #8e8e93;
    --color-card-border: #38383a;
    --color-nav-selected: #3a3a3c;
    --color-nav-selected-text: var(--color-text); /* ajuste: no escuro, texto claro (o azul daria 3,76:1) */
    --color-link: var(--color-primary-on-dark);
    --color-focus: #2997ff;
    --color-neutral-hover: #f5f5f7;
    --color-neutral-active: #d2d2d7;
    --color-neutral-hover-text: #1d1d1f;
    --color-success: #30d158;
    --color-warning: #ffd426;
    --color-error: #ff7169;
    --color-success-tint: color-mix(in srgb, #30d158 12%, #272729);
    --color-warning-tint: color-mix(in srgb, #ffd426 12%, #272729);
    --color-error-tint: color-mix(in srgb, #ff7169 12%, #272729);
    --color-row-attention: color-mix(in srgb, #ffd426 4%, #272729); /* ajuste: 4% para o link manter 4,5:1 */
    --color-chrome: #161617;            /* r-globalnav-background-opened-dark */
    --color-chrome-text: rgba(255, 255, 255, 0.8);
    --color-chrome-text-hover: #ffffff;
    --color-chrome-muted: #a1a1a6;
    --color-chrome-border: #38383a;
    --shadow-card: none;
    --shadow-card-hover: none;
    --shadow-popover: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-segment: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  }
}

:root[data-theme="dark"] {
  --color-bg: #1d1d1f;
  --color-surface: #272729;
  --color-surface-2: #1d1d1f;
  --color-surface-field: #272729;
  --color-fill: #3a3a3c;
  --color-fill-hover: #48484a;
  --color-text: #f5f5f7;
  --color-text-muted: #aeaeb2;
  --color-text-secondary: #d1d1d6;
  --color-border: #424245;
  --color-border-subtle: #38383a;
  --color-border-strong: #8e8e93;
  --color-card-border: #38383a;
  --color-nav-selected: #3a3a3c;
  --color-nav-selected-text: var(--color-text);
  --color-link: var(--color-primary-on-dark);
  --color-focus: #2997ff;
  --color-neutral-hover: #f5f5f7;
  --color-neutral-active: #d2d2d7;
  --color-neutral-hover-text: #1d1d1f;
  --color-success: #30d158;
  --color-warning: #ffd426;
  --color-error: #ff7169;
  --color-success-tint: color-mix(in srgb, #30d158 12%, #272729);
  --color-warning-tint: color-mix(in srgb, #ffd426 12%, #272729);
  --color-error-tint: color-mix(in srgb, #ff7169 12%, #272729);
  --color-row-attention: color-mix(in srgb, #ffd426 4%, #272729);
  --color-chrome: #161617;
  --color-chrome-text: rgba(255, 255, 255, 0.8);
  --color-chrome-text-hover: #ffffff;
  --color-chrome-muted: #a1a1a6;
  --color-chrome-border: #38383a;
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-popover: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-segment: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}