/*
  Tokens base + valores extraídos do project.zip (styleguide.css/style.css).
  Inter local está preparado em /assets/fonts/inter.
  Adicione os arquivos reais da fonte antes de ativar @font-face por arquivo para evitar 404.
*/

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-settings-title: "Inter-Bold", "Inter", Helvetica, Arial, sans-serif;
  --font-settings-item: "Inter-SemiBold", "Inter", Helvetica, Arial, sans-serif;

  /* Variáveis originais do project.zip */
  --x-105698: rgba(16, 86, 152, 1);
  --x-696969: rgba(105, 105, 105, 1);
  --x-53-2a-9a: rgba(83, 42, 154, 1);
  --x-7c-5-0c-8: rgba(124, 80, 200, 1);
  --x-99-8ab-4: rgba(153, 138, 180, 0.5);
  --e-3ddef: rgba(227, 221, 239, 1);
  --x-000000: rgba(0, 0, 0, 1);
  --f-5f-5f-5: rgba(245, 245, 245, 1);
  --ffffff: rgba(255, 255, 255, 1);
  --x-4b-7020: rgba(75, 112, 32, 1);
  --x-6-7ac-2c: rgba(103, 172, 44, 1);
  --d-5efb-1: rgba(213, 239, 177, 1);
  --df-31-4e: rgba(223, 49, 78, 1);
  --f-6d-8dd: rgba(246, 216, 221, 1);
  --d-7e-4f-2: rgba(215, 228, 242, 1);
  --x-8f-5d-02: rgba(141, 103, 35, 1);
  --ffefb-1: rgba(255, 240, 181, 1);

  --color-bg: var(--ffffff);
  --color-surface: var(--ffffff);
  --color-text: var(--x-000000);
  --color-muted: var(--x-696969);
  --color-icon: var(--x-000000);
  --color-chevron: var(--x-99-8ab-4);
  --color-border: #eeeaf4;
  --color-accent: var(--x-53-2a-9a);
  --color-accent-soft: var(--e-3ddef);
  --color-primary: var(--color-accent);
  --color-primary-text: var(--ffffff);

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  --radius-2: 8px;
  --radius-switch: 12.5px;
  --radius-thumb: 12.5px;

  /* Valores originais do project.zip para a tela Ajustes */
  --settings-frame-width: 393px;
  --settings-frame-min-width: 393px;
  --settings-frame-min-height: 695px;
  --settings-inner-width: 393px;
  --settings-inner-height: 590px;
  --settings-header-height: 110px;
  --settings-header-gap: 8px;
  --settings-padding-x: 24px;
  --settings-title-row-height: 48px;
  --settings-title-row-gap: 16px;
  --settings-content-gap: 24px;
  --settings-back-width: 24px;
  --settings-back-height: 22px;
  --settings-back-gap: 10px;
  --settings-back-aspect-ratio: 1.11;
  --settings-back-icon-width: 9px;
  --settings-back-icon-height: 16px;
  --settings-title-size: 28px;
  --settings-title-weight: 700;
  --settings-title-line: 35px;
  --settings-title-letter-spacing: 0;
  --settings-item-padding-x: 24px;
  --settings-item-height: 64px;
  --settings-item-main-gap: 16px;
  --settings-icon-box-width: 24px;
  --settings-icon-box-height: 22px;
  --settings-label-size: 16px;
  --settings-label-weight: 600;
  --settings-label-line: 20px;
  --settings-label-letter-spacing: -0.32px;
  --settings-chevron-width: 8px;
  --settings-chevron-height: 14px;
  --settings-switch-width: 45px;
  --settings-switch-height: 25px;
  --settings-switch-padding-top: 2px;
  --settings-switch-padding-right: 2px;
  --settings-switch-padding-bottom: 2px;
  --settings-switch-padding-left-on: 22px;
  --settings-switch-padding-left-off: 2px;
  --settings-switch-padding-right-off: 22px;
  --settings-switch-thumb: 21px;

  /* Aliases mantidos para os componentes existentes */
  --space-screen-x: var(--settings-padding-x);
  --font-size-screen-title: var(--settings-title-size);
  --font-weight-screen-title: var(--settings-title-weight);
  --font-size-list-item: var(--settings-label-size);
  --font-weight-list-item: var(--settings-label-weight);
  --line-height-screen-title: var(--settings-title-line);
  --line-height-list-item: var(--settings-label-line);
  --size-back: 24px;
  --size-icon-lg: 24px;
  --size-chevron: var(--settings-chevron-width);
  --size-settings-row: var(--settings-item-height);
  --size-settings-action: var(--settings-switch-width);
  --size-switch-width: var(--settings-switch-width);
  --size-switch-height: var(--settings-switch-height);
  --size-switch-thumb: var(--settings-switch-thumb);
  --size-switch-inset: 2px;

  --motion-fast: 160ms ease;
  --shadow-modal: 0 24px 80px rgb(15 23 42 / 22%);
  --z-modal: 50;
}