/* ============================================================================
   gina-ds.css — CAMADA DE TOKENS do Design System Gina.
   GERADO por gen-tokens.py a partir de gina-tokens.export.txt (espelho do Figma).
   NÃO editar à mão — edite o export, rode o gerador. Valide com audit-tokens.py.

   ACENTO: marca = degradê violeta→magenta (logo/nav); CTA = degradê coral→laranja
   (ação); azul chapado = link/ícone/foco; preto = botão neutro primário.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@300;400;500;600;700&display=swap');

:root {
  /* >>> primitivos (literais) >>> */
  --gina-black: #1c1c1c;
  --gina-ink-2: #2b2b2b;
  --gina-ink-3: #424242;
  --gina-ink-4: #6e6e6e;
  --gina-ink-5: #f0f0f0;
  --gina-neutral-darkest: #242424;
  --gina-neutral-dark: #474747;
  --gina-neutral-medium: #8a8a8a;
  --gina-neutral-light: #bdbdbd;
  --gina-neutral-lightest: #fafafa;
  --gina-white: #ffffff;
  --gina-canvas: #ebebeb;
  --gina-blue-darkest: #140a5c;
  --gina-blue-dark: #091a87;
  --gina-blue: #0036f6;
  --gina-blue-bright: #0258ff;
  --gina-blue-light: #5b77d9;
  --gina-blue-lightest: #c2cfff;
  --gina-violet: #4800e5;
  --gina-ink-darkest: #050505;
  --gina-text-strong: #02000a;
  --gina-ink-principal: #292929;
  --gina-secondary-dark: #161616;
  --gina-grad-brand: linear-gradient(135deg, #4800e5 0%, #dd0a73 100%);
  --gina-grad-cta: linear-gradient(90deg, #f54a31 0%, #ff9a02 100%);
  --gina-error: #ff4930;
  --gina-success: #6bbf00;
  --gina-attention: #ffca00;
  --gina-danger-strong: #c62828;
  --gina-placeholder: #4e4d53;
  --dataviz-cat-01: #0068ff;
  --dataviz-cat-02: #16d3f7;
  --dataviz-cat-03: #05faa8;
  --dataviz-cat-04: #3726ff;
  --tag-success-bg: #e8f5d9;
  --tag-success-fg: #337300;
  --tag-warning-bg: #fef3cf;
  --tag-warning-fg: #8a6a00;
  --tag-error-bg: #ffe1db;
  --tag-error-fg: #b02b13;
  --tag-chip-bg: #f5f5f5;
  --tag-spec-1-bg: #dbeaff;
  --tag-spec-1-fg: #0068ff;
  --tag-spec-2-bg: #def9fe;
  --tag-spec-2-fg: #16d3f7;
  --tag-spec-3-bg: #dcfef3;
  --tag-spec-3-fg: #05faa8;
  --tag-spec-4-bg: #e3e1ff;
  --tag-spec-4-fg: #3726ff;
  --tag-spec-5-bg: #e8e2ff;
  --tag-spec-5-fg: #5b32fb;
  --tag-spec-6-bg: #f8dbf7;
  --tag-spec-6-fg: #ce01c4;
  --tag-spec-7-bg: #ffdced;
  --tag-spec-7-fg: #fc0b7d;
  --tag-spec-8-bg: #ffebe3;
  --tag-spec-8-fg: #ff713c;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 100px;
  --space-quark: 4px;
  --space-nano: 8px;
  --space-xxs: 12px;
  --space-xs: 16px;
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 40px;
  --space-xl: 48px;
  --font-sans: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-rg: 16px;
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-xlg: 32px;
  --fs-xxlg: 40px;
  --fs-giant: 64px;
  --fs-xgiant: 80px;
  --fs-huge: 112px;
  --fs-xhuge: 160px;
  --fs-2xs: 11px;
  --fs-display-3xs: 26px;
  --fs-display-2xs: 28px;
  --fs-display-xs: 34px;
  --fs-display-sm: 42px;
  --fs-display-md: 46px;
  --fs-display-lg: 56px;
  --fs-editorial-caption: 15px;
  --fs-editorial-body: 17px;
  --fs-editorial-body-lg: 18px;
  --fs-editorial-lead: 19px;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-tight: 0.04em;
  --ls-medium: 0.08em;
  --ls-distant: 0.16em;
  --lh-tight: 1.0;
  --lh-snug: 1.2;
  --lh-relaxed: 1.5;
  --lh-super: 2.0;
  --shadow-1: 0 10px 24px 2px rgba(33,33,33,0.16);
  --shadow-2: 0 8px 16px 1px rgba(33,33,33,0.08);
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--gina-blue-bright);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--gina-blue-bright);

  /* >>> semânticos (aliases) >>> */
  --dataviz-track: var(--gina-ink-5);
  --dataviz-series-primary: var(--gina-blue);
  --color-bg: var(--gina-white);
  --color-bg-muted: var(--gina-neutral-lightest);
  --color-bg-canvas: var(--gina-canvas);
  --color-surface: var(--gina-white);
  --color-surface-dark: var(--gina-black);
  --color-text: var(--gina-black);
  --color-text-sub: var(--gina-ink-3);
  --color-text-helper: var(--gina-neutral-medium);
  --color-text-inverse: var(--gina-white);
  --color-border: var(--gina-neutral-light);
  --color-border-strong: var(--gina-black);
  --color-divider: var(--gina-neutral-light);
  --color-accent: var(--gina-blue);
  --color-accent-strong: var(--gina-blue-dark);
  --grad-brand: var(--gina-grad-brand);
  --grad-cta: var(--gina-grad-cta);
  --grad-accent: var(--gina-grad-brand);
  --color-nav-active: var(--gina-grad-brand);
  --color-btn-primary-bg: var(--gina-black);
  --color-btn-primary-bg-hover: var(--gina-ink-3);
  --color-btn-primary-fg: var(--gina-white);
  --color-btn-cta-grad: var(--gina-grad-cta);
  --color-btn-cta-fg: var(--gina-white);
  --color-btn-secondary-border: var(--gina-black);
  --color-btn-secondary-fg: var(--gina-black);
  --color-btn-disabled-bg: var(--gina-ink-5);
  --color-btn-disabled-fg: var(--gina-ink-3);
  --color-input-bg: var(--gina-white);
  --color-input-border: var(--gina-black);
  --color-input-focus: var(--gina-blue-bright);
  --color-input-error: var(--gina-error);
  --color-input-placeholder: var(--gina-neutral-medium);
  --color-danger: var(--gina-error);
  --color-danger-strong: var(--gina-danger-strong);
  --color-text-placeholder: var(--gina-placeholder);
  --color-success: var(--gina-success);
  --color-warning: var(--gina-attention);
}

/* ---- Reset mínimo + base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* links herdam cor e NÃO são sublinhados por padrão (sublinhar é opt-in) */
a { color: inherit; text-decoration: none; }

/* entrada de página delicada (fade + leve subida) — sensação de transição suave */
@keyframes ds-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* fill-mode = BACKWARDS (não `both`): aplica o estado inicial antes de começar (sem flash) mas, ao terminar,
   volta ao estado base do body — SEM deixar `transform` residual. `both`/`forwards` deixavam um
   transform de matriz-identidade no <body> que criava um containing block e quebrava `position:fixed`
   dos filhos (o FAB grudava no fim do body, sobre o footer, em vez de flutuar). */
body { animation: ds-page-in 0.45s var(--ease) backwards; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* foco visível padrão (anel-duplo) — acessibilidade */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Estilos de texto CANÔNICOS (Figma › Tokens › Fonts) =====================
   Régua Rubik real, com letter-spacing e pesos exatos. USAR estas classes — nunca
   font-size/weight ad-hoc. Tracking do Figma: 4% = 0.04em, 2% = 0.02em. ========= */
.ds-h1        { font-family:var(--font-sans); font-weight:700; font-size:80px; line-height:1;   letter-spacing:-0.02em; }  /* desktop/H1 */
.ds-display   { font-family:var(--font-sans); font-weight:700; font-size:32px; line-height:1.2; }                          /* KPI valor, dia da agenda */
.ds-title     { font-family:var(--font-sans); font-weight:700; font-size:24px; line-height:1.2; }                          /* "Helena", títulos de bloco */
.ds-nav       { font-family:var(--font-sans); font-weight:600; font-size:16px; line-height:1.4; letter-spacing:0.04em; }   /* nav sidebar + labels de seção */
.ds-bold-1    { font-family:var(--font-sans); font-weight:600; font-size:16px; line-height:1.4; }                          /* general/bold-1 (content-switcher) */
.ds-bold-body { font-family:var(--font-sans); font-weight:700; font-size:16px; line-height:1.5; }                          /* categoria do KPI */
.ds-body      { font-family:var(--font-sans); font-weight:300; font-size:16px; line-height:1.5; letter-spacing:0.04em; }   /* general/body-1: "Olá," + nav da home aberta */
.ds-body-reg  { font-family:var(--font-sans); font-weight:400; font-size:16px; line-height:1.5; letter-spacing:0.04em; }   /* "Ver perfil", input */
.ds-caption   { font-family:var(--font-sans); font-weight:400; font-size:14px; line-height:1.4; letter-spacing:0.02em; }   /* sublabel do KPI */
.ds-caption-b { font-family:var(--font-sans); font-weight:700; font-size:14px; line-height:1.4; letter-spacing:0.04em; }   /* data da agenda */
.ds-button    { font-family:var(--font-sans); font-weight:600; font-size:16px; line-height:1;   letter-spacing:0.02em; }   /* general/button: botões, "Ver mais", "Sair" */