/* tokens.css — design tokens semânticos (não usar cores hardcoded em componentes) */
:root{
  /* Estrutura fixa */
  --topbar-h: 40px;
  --dock-h: 100px;

  /* Brand / Accent */
  --accent: #0A84FF;         /* iOS blue semantic */
  --accent-contrast: #FFFFFF; /* Cor do texto sobre accent */
  --success:#30D158;
  --warning:#FFD60A;
  --danger: #FF453A;

  /* Neutros (base — ajustados pelo theme.css) */
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F2F2F7;

  --text:      #111111;
  --text-2:    #3A3A3C;
  --muted:     #8E8E93;

  --separator: rgba(60,60,67,0.29);
  --border:    rgba(60,60,67,0.18);

  /* Focus ring */
  --focus: rgba(10,132,255,0.35);

  /* Shadow (usar com parcimônia; em iOS moderno, menos sombra) */
  --shadow-1: 0 6px 18px rgba(0,0,0,0.08);

  /* ============================================================
     TOKENS — Cards: Material Blur (levíssimo) + borda quase zero
     - Sem sombra externa (blur dá clareza de camada)
     - Inset highlight muito sutil
     - Borda praticamente imperceptível
     ============================================================ */
  
  /* Raio e espaçamento */
  --card-radius: 18px;
  --card-padding-lg: 18px;
  --card-gap: 8px;

  /* Material Blur (NOT glass heavy) */
  --card-blur: 10px;
  --card-sat: 1.15;

  /* Divisor (linha interna) */
  --divider-alpha: 0.22;

  /* Borda quase invisível */
  --card-border: rgba(255,255,255,0.02);

  /* Inset highlight muito sutil (dá "volume" sem sombra) */
  --card-inset-highlight: rgba(255,255,255,0.06);

  /* ============================================================
     TOKENS - Buttons (iOS-like)
     ============================================================ */

  /* Dimensões */
  --btn-h: 44px;                    /* hit target mínimo */
  --btn-py: 10px;
  --btn-px: 16px;
  --btn-radius: 12px;

  /* Tipografia */
  --btn-font-size: 17px;
  --btn-font-weight: 600;

  /* Spacing */
  --btn-gap: 8px;

  /* Estados */
  --btn-disabled-opacity: 0.45;
  --btn-active-scale: 0.98;
}